Question

尽管我讨厌CSS，但我必须使用它

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

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

指南说，您必须证明并对齐中心。

这是我的codepen

另一个简化的代码笔：HERE 代码：

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; }

我想念什么？

Answer 1

这是您在做什么错。 Display flex及其flex属性应应用于同一父对象，但您已将flex应用于“ mainDiv”，其属性应用于“ mainlogo” div。

这是解决方法。

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

更改了高度值以使其在代码笔中准确居中。

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

Answer 2

尝试冷静地编写CSS，您忘记在codepen两者中都添加“ Bootstrap” CSS。试试这个。非常简单实用

https://codepen.io/Dilip7597/pen/VGEeKZ

Answer 3

只需在css下面提供图片，

img.fadinglogo {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

它也会居中垂直和水平对齐...

带弹性引导的中心元素

3 个答案: