Question

我想让3个内容在div中垂直居中。我使用vertical-align:middle，但它没有做我想做的事情。我该如何解决这个问题？

我希望home_post_time显示在垂直居中的右上角。我已经尝试了float:right;但却做不到我想要的事情。这就是我希望它出现的方式

Image
Image    text                time
Image

＆＃13;

.home_post_sections {
  width: 100%;
  height: 33%;
  background-color: #01ff70;
  text-align: left;
}

.home_post_propic {
  width: 55px;
  height: 55px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}

.home_post_username {
  margin-left: 20px;
  width: 100%;
  vertical-align: middle;
}

.home_post_time {
  float: right;
  vertical-align: middle;
  text-align: right;
  margin-right: 10px;
}

＆＃13;

<div className="home_post_sections">

  <img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" />
  <a className="home_post_username">User name</a>
  <a className="home_post_time">23h</a>

</div>

＆＃13;

Answer 1

您可以使用此

<div  style="display:flex;justify-content:center;align-items:center;">
<h1>Text In center</h1>
</div>

代码

<div style="display:flex;justify-content:center;align-items:center;">

<img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" />
<a className="home_post_username">User name</a>
 <a className="home_post_time">23h</a>
</div>

Answer 2

您可以使用flex将其垂直居中，如下所示

<style>
 .home_post_sections{
   display : flex;
   align-items : center; //make child items align vertically center
 }
</style>

<div className="home_post_sections">

  <img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" />
  <a className="home_post_username">User name</a>
  <a className="home_post_time">23h</a>

</div>

Answer 3

我做了主要的容器位置：亲戚; 我做位置的时间容器：绝对;顶部50％，顶部减去其高度的一半。 10px只是一个近似值。

.home_post_sections {
    position: relative;
}
.home_post_time {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
}

https://jsfiddle.net/1f09hp3f/

您大多使用静态宽度和高度，因此如果您只想对齐一个元素，此解决方案应该适合您。否则，您可以查看以下链接以垂直居中对齐所有元素。 Vertical alignment of elements in a div

垂直对齐div内部的中心

3 个答案: