时间戳

首页 > 解决方案 > 带弹性引导的中心元素

html - 带弹性引导的中心元素

问题描述

虽然我讨厌 css，但我必须使用它

我正在尝试使用 flex 将元素居中，这被宣传为简单的解决方案。现实是它不起作用。

我做错了什么？我希望图像徽标的宽度和高度正好位于页面的中间，正好在中间。

指南说你必须证明和对齐中心。

这是我的密码笔

另一个简化的codepen：这里 代码：

HTML

<div class="maindiv d-flex">
    <div class="mainlogo justify-content-center align-items-center">
        <img id="fadinglogo" class="mainlogo justify-content-center align-items-center" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/The_Venus_Project_logo_image.png/600px-The_Venus_Project_logo_image.png"/>
    </div>
</div>

CSS

/*DEFAULT MVC PROJECT CSS*/
html body {
  padding-top: 50px;
  padding-bottom: 20px;
  width: 100%;
  height: 100%; }

/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px; }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal; }

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
  max-width: 280px; }

/*BEGINNING CUSTOM SASS*/
.maindiv * {
  width: 100%;
  height: 100%; }

#fadinglogo {
  width: auto; }

我错过了什么？

标签： htmltwitter-bootstrapcssflexbox

解决方案

这是你做错了什么。显示 flex 和它的 flex 属性应该应用到同一个父级，但是你已经将 flex 应用到了“mainDiv”，它的属性应用到了“mainlogo”div。

这是修复。

.maindiv{//display:flex;}
.mainlogo{display:flex;
justify-content:center;
align-items:center;}

将高度值更改为在代码笔中完全居中。

https://codepen.io/Harsh89/pen/RYeWvX

推荐阅读