Vertically Aligning Elements
Posted
by
Naz
on Stack Overflow
See other posts from Stack Overflow
or by Naz
Published on 2013-11-09T15:29:53Z
Indexed on
2013/11/09
15:53 UTC
Read the original article
Hit count: 226
Filed under:
css
|vertical-alignment
I'm trying to understand how to center elements within a div. I have this basic code I am working with and am trying to get the 'This is a button' element to be in the center
<body>
<div style="width:960px;background-color:#d7d7d7;">
<div style="
width:400px;
padding:10px;
height:auto;
background-color:#006699;
display:inline-block;
">
<p> Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div style="
width:100px;
padding:10px;
height:auto;
background-color:#b1b1b1;
float:right;
display:inline-block;
margin:auto!important;
vertical-align:middle;
">
<p>This is a button</p>
</div>
</div>
</body>
It's essentially 1 div, divided into 2 with text on the left hand side and a 'This is a button' label to be in the center of the right side, but I can;t figure out how to get it to center, I've tried all sorts of methods.
All help/advice is appreciated.
© Stack Overflow or respective owner
