Question

我知道这是一个古老的问题，但现有的解决方案都不适合我。

我想垂直对齐#name_post＆amp; #pic_post在中心。

这是我的代码。如果您运行代码段，您将看到我失败了。

＆＃13;

.circular {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  top: 50%;
  margin-top: 5px;
}
.heading_post{
	display; table-cell;
	vertical-align: middle;
  	padding-left: 10px;
}
.heading_name
{
	color: #45619d;
}
#pic_post, #name_post{
	display:inline;
}
#name_post_name, #name_post_work{
	display:inline;
}

.name{
	background-color: #dedfe1;
	border-radius:15px 15px 15px 15px;
	-webkit-border-radius:15px 15px 15px 15px;
	-o-border-radius:15px 15px 15px 15px;
	-moz-border-radius:15px 15px 15px 15px;
	margin: 0px;
	display: table;
	width: 100%;
}

＆＃13;

 <li class="item">
            	<div class= "name">
            		<img id="pic_post" class="circular" src="http://cdn.makeuseof.com/wp-content/uploads/2009/11/android_small.png" alt="" />
            		<div id="name_post" class= "heading_post">
            			<h5 id="name_post_name" class="heading_name">Tamzeed Islam</h5>
            			<h5 id="name_post_work">posted on web</h5>
            		</div>
            	</div>
              <p id="post_details" class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
            </li>

＆＃13;

Answer 1

将text-align: center;添加到父.name，然后添加#pic_post, #name_post添加vertical-align: middle;。

.item{list-style: none}
.circular {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  top: 50%;
  margin-top: 5px;
}
.heading_post{
	display; table-cell;
	vertical-align: middle;
  	padding-left: 10px;
}
.heading_name
{
	color: #45619d;
}
.name {
background-color: #dedfe1;
border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
margin: 0px;
display: table;
width: 100%;
text-align: center;
}

#pic_post, #name_post {
vertical-align: middle;
display: inline;
}
#name_post_name, #name_post_work{
	display:inline;
}

<li class="item">
    <div class= "name">
        <img id="pic_post" class="circular" src="http://cdn.makeuseof.com/wp-content/uploads/2009/11/android_small.png" alt="" />
        <div id="name_post" class= "heading_post">
            <h5 id="name_post_name" class="heading_name">Tamzeed Islam</h5>
            <h5 id="name_post_work">posted on web</h5>
        </div>
    </div>
    <p id="post_details" class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
</li>

Answer 2

查看此解决方案：只有一个变化#pic_post，＃name_post {vertical-align：middle;}

.circular {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  top: 50%;
  margin-top: 5px;
}
.heading_post{
	display; table-cell;
	vertical-align: middle;
  	padding-left: 10px;
}
.heading_name
{
	color: #45619d;
}
#pic_post, #name_post{
	display:inline;
    vertical-align: middle;
}
#name_post_name, #name_post_work{
	display:inline;
}

.name{
	background-color: #dedfe1;
	border-radius:15px 15px 15px 15px;
	-webkit-border-radius:15px 15px 15px 15px;
	-o-border-radius:15px 15px 15px 15px;
	-moz-border-radius:15px 15px 15px 15px;
	margin: 0px;
	display: table;
	width: 100%;
}

 <li class="item">
            	<div class= "name">
            		<img id="pic_post" class="circular" src="http://cdn.makeuseof.com/wp-content/uploads/2009/11/android_small.png" alt="" />
            		<div id="name_post" class= "heading_post">
            			<h5 id="name_post_name" class="heading_name">Tamzeed Islam</h5>
            			<h5 id="name_post_work">posted on web</h5>
            		</div>
            	</div>
              <p id="post_details" class="details">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
            </li>

无法使用CSS垂直对齐元素

2 个答案: