JSFiddle link
HTML:
<div id="va-m">
<img src="http://placehold.it/150x150">
<h1> vertical-align: middle </h1>
</div>
<div id="no-va">
<img src="http://placehold.it/150x150">
<h1> no vertical align </h1>
</div>
CSS:
div {
margin-top: 30px;
padding: 5px;
width: 500px;
height: 150px;
line-height: 200px;
background-color: blue;
}
#va-m img {
vertical-align: middle;
}
h1 {
display: inline;
}
img {
border-radius: 75px;
}
I'm trying to align the image and text vertically in the container div. However, I seem to either get the choice of aligning the image, or aligning the text. Using vertical-align: middle on the img tag pushes it out of the container. Why?
Change the height to auto
Fiddle
div {
margin-top: 30px;
padding: 5px;
width: 500px;
//height: 150px;
height: auto;
line-height: 200px;
background-color: blue;
}
Update: Use table and table-cell + vertical-align: middle
Fiddle
Related
Why my div <div class="two"> didint align verticaly at the middle event after i put vertical-align: middle;
Here's a FIDDLE
HTML :
<div class="main">
<div class="one"></div>
<div class="two"></div>
</div>
CSS :
.main {
border: 1px solid;
display: inline-block;
}
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
}
.two {
display: inline-block;
width: 10px;
height: 10px;
background-color: cadetblue;
vertical-align: middle;
}
You need the vertical-align:middle on one, and two. That way the vertical middle of one is aligned with the vertical middle of two. You could also just put vertical-align:middle on one which will align its vertical middle position to the baseline vertical position of two.
jsFiddle example
Try this:
Add vertical-align:middle rule to .one class
.one {
width: 70px;
height: 70px;
background-color: antiquewhite;
display: inline-block;
vertical-align: middle; /* Adde Rule */
}
Fiddle
I want to have an image centered within each DIV that is floating left within a larger DIV.
In the following example, I want the gray boxes ("assetInfoBody") to be centered within the green boxes ("assetBox"). What else can I try here beside text-align:center and margin:auto?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#assets {
background-color: orange;
padding: 5px;
width: 100%;
height: 100%;
}
.assetbox {
background-color: lightgreen;
float: left;
width: 100px;
margin-right: 5px;
text-align: center;
}
.assetInfoBody {
background-color: grey;
position: relative;
width: 80px;
text-align: center;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
top: 0px;
}
</style>
</head>
<body>
<div id="assets">
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
<div class="assetbox">
<div class="assetInfoBody">
<div class="centeredItem">
<img src="images/box.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
See this example for a reference to how you could achieve this. As your class .assetInfoBody class has a set width you can align the .centeredItem by applying the rule margin:0 auto to it. By also applying text-align:center to .centeredItem you're able to always keep the image centered within it.
probably you want a css like that:
#assets {
background-color: orange;
padding: 5px;
width: 100%;
}
.assetbox {
background-color: lightgreen;
display: inline-block;
width: 100px;
margin-right: 5px;
}
.assetInfoBody {
background-color: grey;
margin: 0 auto !important;
width: 80px;
}
.centeredItem {
margin-left: auto;
margin-right: auto;
}
I have an image inside a div like this
<div><img /><div>
The image is dynamic of no fixed size. The div is of size 200px by 200px. The image size is not known beforehand. If the size of the image is greater than 190px by 190px, set it to 190px by 190px (that is, max-width:190px, max-height:190px). How can I center the image with these needs satisfied? I need a solution working in Internet Explorer 7 too.
The solution here and here can not be applied to my problem because
It is not certain that the image would be less than 200 pixels.
I want horizontal alignment too.
No Internet Explorer 7 support.
(Some questions have been asked on Stack Overflow regarding the same, but my scenario is different, so they are not applicable for this particular problem.)
The solution is to change the div into a table. Normally, you shouldn't use tables for positioning, but when it comes to older non-standards-compliant browsers, sometimes that's the only choice. Demonstration here. For the record, this works on Internet Explorer 6, as well.
Code:
CSS
#theDiv
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
HTML
<table id="theDiv" style="border: solid 1px #000">
<tr>
<td>
<img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
</td>
</tr>
</table>
Here's an update that uses CSS instead of changing the markup to an actual table:
#theDiv
{
display: table;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div id="theDiv" style="border: solid 1px #000">
<div class="tr">
<div class="td">
<img id="theImg" src="http://lorempixel.com/100/100/" />
</div>
</div>
</div>
See this fiddle: http://jsfiddle.net/ANwmv/
Solution to centering as suggested in: http://www.brunildo.org/test/img_center.html
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
HTML:
<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>
Give the parent a line-height equivalent to its own height, and a text-align property of center. Give the image a vertical-align property of middle to centre it within its line-height:
HTML:
<html>
<body>
<div>
<img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/>
</div>
</body>
</html>
CSS:
div, img {
border: 1px solid black;
}
div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
img {
max-width: 190px;
max-height: 190px;
vertical-align: middle;
}
JS Fiddle example
You can do this:
<div style="text-align:center;vertical-align:middle;">
<img style="margin:0 auto" />
</div>
This is my fiddle: http://jsfiddle.net/7UwD2/
I've tried everything I found on the internet - setting:
margin: 0px auto; with width, but it doesn't work.
Only if I'll add an attribute: text-align: center; to the head-title class it does center - but only the text, image is still on the left position.
Where is my problem?
Remove the float from the image,
use text-align: center on the outer DIV,
use a SPAN instead of the inner DIV,
apply vertical-align: middle to the image and SPAN
HTML:
<div class="head-title">
<img class="list-icon" src="...">
<span>Menu</span>
</div>
CSS:
.head-title {
width: 150px;
height: 26px;
padding: 5px;
text-align: center;
}
.head-title > * {
vertical-align: middle;
}
.list-icon {
width: 24px;
height: 24px;
}
Live demo: http://jsfiddle.net/7UwD2/6/
i have a div that has a specific height and the content inside adjusts according to height VERTICALLY now what i did is i added the property display-table; to the parent div and display: table-cell;vertical-align: middle; to the child div now what happens is my div is vertically aligned and looking good but the h1 inside the child i not exactly as centered aligned as the button i figured adding some padding top or margin top might solve the issue but it is not accepting either of these here's my code
html
<div class="all-smiles" id="parent">
<div id="child">
<div class="container" align="center">
<div class="row">
<h1>All Smiles Welcome</h1>
<button>BOOK AN APPOINTMENT</button>
</div>
</div>
</div>
</div>
css
#parent {
display: table;
width: 100%;
height: 250px;
}
.all-smiles {
background-color: #b7181c;
}
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
}
.all-smiles button {
padding: 12px;
background: 0;
color: white;
border: 1px solid #fff;
text-decoration: none;
font-family: young;
}
#child {
display: table-cell;
vertical-align: middle;
}
FIDDLE
You need to specify these two:
Vertical Alignment as middle
Line height and 1
Code:
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
vertical-align: middle;
line-height: 1;
}
Preview
Fiddle: https://jsfiddle.net/wd3sr2xv/