Vertical-align: middle; is not working.
From css file :
#header {height:150px; text-align: center; vertical-align: middle;}
<div id="header">
<img alt="" id="logo" src="images/logo.png" />
</div>
I would wrap the logo inside another div if it helps to align it to the center of the wrapper div.
do this
#header {display:table;}
#logo {display:table-cell; vertical-align:middle;}
Reference
You can do this only by padding, because other two ways line-height and vertical-align can't work on img....
Write
#logo
{
padding: 20px 0;
}
20px can be anything as you require.
Another option, although it has its limitations:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:150px; text-align: center;">
<img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" />
</div>
</body>
</html>
The negative margin should be half of the image height. So the following image will center in the above HTML:
This makes the centering dynamic if you happen to have a div that changes height. It can get a little tricky with the relative positioning though, because the image is taken out of the normal layout flow.
#logo {
position: absolute;
top: 50%;
margin-top: -75px;
}
Common method of doing vertical alignment. With top being 50% and margin-top being negative half the dimension of the parent div.
i like doing this:
<div style="relative">
<img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
</div>
i dont know why it worked in my case... but by I could see it working by doing following:
div {padding-top: 0%;}
Related
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
I have a div containing a title text and an image.
With the code below, the title is showing just above the image.
HTML code:
<div class="thumbnail">
<div class="text">
<center>Heading</center>
</div>
<div class="image">
<img src="sample.png">
</div>
</div>
I would like to align the title so that it will appear on the center (vertically and horizontally) of the image.
How can I achieve that using HTML and CSS?
You could remove the image tag and make the image be the background of the container div.
HTML
<div class="text">
Heading
</div>
CSS
.text {
background-image: url('sample.jpg');
text-align: center;
}
EDIT: I don't want to sell it as my perfect answer, but I realized I missed the vertical alignment, and as similar solutions have already been provided here in comments and answers, let me just provide you with a good source of info below. The point is that you could use vertical-align:middle if you used span or other inline element, but with div, you have to use other tricks like position:absolute and minus margins.
Source: http://phrogz.net/css/vertical-align/index.html
Your markup is mostly correct with the exception of using the center element and you do not need to wrap the img element in a div.
Here is some example markup:
<div class="thumbnail">
<h1>Heading</h1>
<img src="sample.png">
</div>
And its corresponding CSS:
.thumbnail {
position:relative;
}
.thumbnail h1 {
text-align:center;
position:absolute;top:50%;left:0;width:100%;
margin-top:-20px; /*make the negative top margin = half your h1 element height */
}
You could always use an element other than an h1 to hold your title. This just depends on your preference.
The following might help you.
HTML:
<div class="thumbnail">
<div class="text">
Heading
</div>
</div>
CSS:
.text {
background-image: url('http://cs616623.vk.me/v616623331/7991/vPKjXbo-c7o.jpg');
width: 320px;
height: 240px;
line-height: 240px;
vertical-align: middle;
text-align: center;
font-size: 48px;
}
Take into account that in this approach you would have to set manually the height and the width of your text element. Moreover, the height should be duplicated in the line-height in order for vertical alignment to work correctly.
You could test and change the code in the corresponding JSFiddle or just check the full-screen result.
I wouldn't recommend using lineheight to vertically align the text(as some answers suggest) solely because if the header is to long and spans over across two rows it would look terrible.
What I would do is to absolute position the heading and then use display: table-cell to vertical align it.
Note that to be able to use this solution you have to specify an height for the heading.
HTML
<div class="thumbnail">
<div class="text">
<h1>Heading</h1>
</div>
<div class="image">
<img src="http://placehold.it/350x250" />
</div>
</div>
CSS
.thumbnail{
position: relative;
display: inline-block;
}
.text{
position:absolute;
top: 0px;
left: 0px;
width: 350px;
}
.text h1{
height: 250px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 350px;
color: #fff;
}
JSfiddle here
I have a website and i've centered some images using text-align.
Now in my main content div, i am trying to center an img and it's not working.
<div id="Content" style="width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;">
<img src="myimg.png" style="text-align: center;" />
</div>
That's all there is to it. Why will all other images center, but not this one?
text-align: center needs to be applied to the parent element, in your case, the div:
<div id="Content" style="width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;text-align: center;">
<img src="myimg.png" />
</div>
Though I strongly discourage the use of inline CSS, so if you have a stylesheet, move it there:
#Content {
width:100%;
position:absolute;
overflow:auto;
top:66px;
bottom:200px;
text-align: center;
}
Another way to do it is the automatically distribute the margins around the element, but this will only work for block-level elements:
#Content > img {
display: block;
margin: 0 auto;
}
Instead of using the text-align on img tag, use it on div tag:
<div id="Content" style="width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;text-align: center;">
<img src="myimg.png" />
</div>
Text align center should be your div characteristic rather than img.
<div id="Content" style=" text-align: center; width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;">
You can use auto margins for this:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
More reading: w3
or, if you know the width of the image:
img {
position: absolute;
left: 50%;
margin-left: -(half ot the image width)px
}
from here
Avoid using inline CSS, they are bad to do on websites because search engines take it negatively, always try to use a different stylesheet for the CSS. You can use the code as rink attendant gave.
And text-align can only be used in block containers
I'm trying to make an avatar creation site, but the images won't center. I tried everything in my book. Anyone have any ideas where I'm going wrong?
<img src="avatar/body_blue.png" class="body" id="body0"/>
<img src="avatar/body_green.png" class="body" id="body1"/>
<img src="avatar/body_grey.png" class="body" id="body2"/>
<img src="avatar/body_orange.png" class="body" id="body3"/>
<img src="avatar/body_purple.png" class="body" id="body4"/>
And here is this CSS:
.body {
z-index:7;
position:absolute;
width:575px;
height:750;
margin:0px auto;
text-align: center;
}
You can view it live here.
You can try using
.body {
margin:0 auto;
display:table;
}
I recommend you read about CSS a little, here is a good example of centering anything.
http://www.w3.org/Style/Examples/007/center.en.html
The solution for this is to place your <img> tags inside a <div> that has already been centered. This way you can keep your <img> tags absolutely positioned so your images stay stacked on top of eachother.
"An absolute position element is positioned relative to the first parent element that has a position other than static." - W3Schools. Meaning your absolutely positioned <img> tags will be placed relative to your container <div>.
Updated HTML:
<div class = "container">
<img src="avatar/body_blue.png" class="body" id="body0"/>
<img src="avatar/body_green.png" class="body" id="body1"/>
<img src="avatar/body_grey.png" class="body" id="body2"/>
<img src="avatar/body_orange.png" class="body" id="body3"/>
<img src="avatar/body_purple.png" class="body" id="body4"/>
</div>
Add this CSS class:
.container{margin: 0px auto; width: 575px;}
Ok i just checked your CSS and came up with the following changes :
Remove the width from #avatar
Remove position:absolute; from .body
This will center the big fluffy animal you have.
You have styled the DIV #avatar with the following:
#avatar {
position: relative;
width: 300px;
height: 350px;
If this is the DIV you want centered on the page, then change the styling to:
#avatar {
margin: 0 auto;
width: 300px;
height: 350px;
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
How can i make the image start from the middle of this box? (middle both vertical and horizontal)
There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.
Use absolute position. This only works if you know the size of the image.
Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.
See example here: http://jsfiddle.net/JPch8/
Use margin: 0 auto;text-align: center; and line-height/font-size.
This is a bit more tricky, since line-height doesn't work as it should in IE for inline-block elements like images. That's where the font-size comes in.
Basically, you set the line-height of the image container to the same as the container's height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.
See example here: http://jsfiddle.net/JPch8/2/
In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;
See example here: https://jsfiddle.net/ptz9k3th/
HTML:
<div id="photo_leftPanel">
<img src="bla.jpg">
</div>
CSS:
div.photo_leftPanel {
position: relative;
}
div.photo_leftPanel > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
put the image in a <div> with text-align:center; without specifying the size of the box
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box).
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
"float:left; position:relative" probably doesn't work as expected. Floated elements are considered absolute.
To get the image centered vertically you need a height on the div, and you need height on it's parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
<img src="bla.jpg">
</div>
I hope I understand what you are trying to achieve.
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>