Question

好的，所以我一直在这个网站上工作。大多数情况下，这只是一种概念证明。我现在还没有在很长一段时间内对网站进行编码，所以这基本上就像我们想要回到马上一样。无论如何，我已经在这个论坛上搜索了一段时间，我确实发现了很多与我非常相似的问题。但不知何故，他们给我的所有解决方案和所有想法似乎都不适合我。现在也许我的某个地方有一个错字让我的浏览器变得疯狂并误解了我不知道的代码。我想要做的是创建一个像流体布局的东西，4“列”都是画布的1/4和全高。在这四列中的每一列中，我想放置一个我想成为中心的图像。这样我就可以将图像移动到列的顶部，并在鼠标悬停时在中心处放置一些文本。事情是我似乎找不到将图像放在中心的方法。我尝试使用和容器。我甚至尝试在没有容器的情况下对齐，但它不会去我想要的地方。正如我所提到的，也许我在某处或某事上有错字。任何所以这是我用于布局的HTML代码

<body>
  <div id="col_home">first text first text</div>
  <div id="col_so"> text text text</div>
  <div id="col_tra">
    <div id="picture">
      <img src="img/Ordner ZU.png" width="100px" height="100px" />
      </div>
    image title
  </div>
  <div id="col_co">last text last text</div>
</body>

这是我用于格式化的css

    html {
width: 1024px;
height: 768px;
margin: auto;
border: 1px solid;
}

body, div {
margin: 0px;
width: 100%;
height: 100%;
}

#col_home {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
}

#col_so {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 1);
}

#col_tra {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 204,51);
}

#col_co {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 153, 0);
}

#picture {
position: absolute;
left: 50%;
clear: left;
}

感谢任何人和每个人的帮助。正如我所说，我主要是为了好玩，但我仍想为我的学习曲线找出一个可能的解决方案;）。我确实首先用id-tags运行它，但是现在我认为它不会产生任何影响，至少在我得到的结果中没有。

Answer 1

实现这一目标的一种简单方法是使用flexbox。要将子元素置于其父元素中心，您可以使用justify-content:center;水平对齐项目，align-items:center - 垂直对齐。 flex-flow:row使您的子元素显示在一行中，如果您希望它们显示在列中，请使用flex-flow:column。您可以点击下面的按钮运行代码段来查看结果。

 html {
  width: 1024px;
  height: 768px;
  margin:auto;
  border: 1px solid;
}

body, div {
  margin:0;
  width: 100%;
  height: 100%;
  display:flex;
  flex-flow:row;
}

#col_home {
  width:25%;
}

#col_so {
  width:25%;
  background-color: rgb(255, 255, 1);
}

#col_tra {
  width:25%;
  flex-flow:column;
  background-color: rgb(255, 204,51);
}

#col_co {
  width:25%;
  background-color: rgb(255, 153, 0);
}
#picture{
  justify-content:center;
  align-items:center;
}

<body>
  <div id="col_home">first text first text</div>
  <div id="col_so"> text text text</div>
  <div id="col_tra">
    <div id="picture">
      <img src="img/Ordner ZU.png" width="100px" height="100px"/>
      </div>
  </div>
  <div id="col_co">last text last text</div>
</body>

Answer 2

使用float这样的列布局已经成为过去 - 你真的想要使用flexible box model（又名“flexbox”）。在下面的示例中，您可以看到设置列所需的CSS代码相当少，并且每列始终尝试通过“flexing”占用任何可用空间。由于有4列，它们总是占据25％的空间。

然后在任何单独的列中，您可以使用传统的relative定位顶部/左侧和边距偏移来完美居中图像：

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-flow: row;
}

.col {
  flex: 1 1 auto;
  position: relative;
}


#col2 {
  background-color: rgb(255, 255, 1);
}

#col3 {
  background-color: rgb(255, 204,51);
}

#col4 {
  background-color: rgb(255, 153, 0);
}

#picture {
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  position: relative;
  top: 50%;
}

<div class="col" id="col1"></div>
<div class="col" id="col2"></div>
<div class="col" id="col3">
   <div id="picture">
      <img src="img/Ordner ZU.png" width="100px" height="100px" />
      <br>image title  
  </div>
</div>
<div class="col" id="col4"></div>

不确定你在鼠标悬停时究竟要做什么，但这应该让你非常接近。您还可以将每个列转换为弹性框，并尝试将图像与justify或align属性对齐，但这可能会因悬停效果而变得棘手。

定位父div的div中心

2 个答案: