Bashima Bashima - 4 years ago 88
CSS Question

Can't align elements vertically with CSS

I know it is an ancient question but none of the existing solution worked for me.

I want to vertically align #name_post & #pic_post in center.

This is my code. If you run the code snippet you will see that I failed.



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

<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 Source

See this solution: only one change #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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download