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;
Related
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
My goal is to center an image which is bigger in a my div.
I do not want to resize the image.
The center of the image must be displayed.
My div is defined like:
div.thumbnail
{
display: block;
margin: auto;
height: 100px;
width: 100px;
overflow: hidden;
}
And then my idea was to create this additionally for the image:
div.thumbnail img
{
overflow: hidden;
margin: auto;
}
The HTML looks like:
<div class="thumbnail">
<a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
<img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
</a>
</div>
But this does not work for me.
Any advice how to fix this?
Thanks Darrell.
Here is the trick. It is easy to center the image horizontally. However the vertical centering is not so easy and involves more markup. You may use background-position property. Here is jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/
HTML
<div class="thumbnail">
<a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
</a>
</div>
CSS
div.thumbnail {
display: block;
margin: auto;
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
div.thumbnail a {
display: block;
width: 100%;
height: 100%;
background-position: center center;
}
There is a bad effect of course. Your image will not be indexed, because it is in a css style.
Horizontally centering the image should be straightforward, but vertically centering page elements is a pain. A cleaner solution would be to set the image as the background-image of the div (or possibly the anchor tag) and use the other css background properties to position it. Something like: style="background-image: url([url]); background-position: center" should do the job.
This is by far the easiest solution I know, you need two divs to do what you are trying to do. like so:
<div class="thumbnail">
<div class="image-container">
<a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
<img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
</a>
</div>
</div>
css
.thumbnail{
width: 100px;
height:100px;
overflow:hidden;
}
.image-container{
width: 100%;
height: 100%;
//use the margin property to position the image in the div.
margin: 0 0 0 0;
}
we set the thumbnail div to whatever size we want and by making the overflow hidden the div inside thumbnail, in this case our image will be full size but cropped to what ever spot of the image we wish to show .
To center multiple sizes of images inside of a single sized div, set the image as the background (centered) of the div in CSS - no img elements necessary. Then set a fixed width for the div and hide the overflow.
<div class="s1"> [ Content ] </div>
<div class="s2"> [ Content ] </div>
<div class="s3"> [ Content ] </div>
div{
width:300px;
height:300px;
overflow:hidden;
}
.s1{
background:transparent url("http://placehold.it/500x500") center center no-repeat;
}
.s2{
background:transparent url("http://placehold.it/700x500") center center no-repeat;
}
.s3{
background:transparent url("http://placehold.it/500x700") center center no-repeat;
}
http://jsfiddle.net/daCrosby/sYgHG/1/
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
Although this question is asked before, my problem is little different. I have a div, within which I have two images. First image needs to be stayed left align, where as the second image needs to be center aligned. The div has no fixed width, so that it covers the heading. I have created a fiddle, which can be found here.
Any suggestion will be very helpful to me.
Case 1
Add text-align:center to the div class.
Give float:left to the first image by using pseudo class so that your second image will be center aligned to the div and first image will be left aligned.
Here is the demo http://jsfiddle.net/Eevpc/5/
Case 2
Do it by position:absolute
.brandLogo {
margin: 15px; background-color:red; text-align:center; position:relative;
}
a img:first-child {
border: 0 none; position: absolute; left:0;
height: auto;
vertical-align: middle;
}
img {
border: 0 none; margin:0 auto !important;
height: auto;
vertical-align: middle;
}
Demo http://jsfiddle.net/Eevpc/11/
In case 1, second image is center for the remaining width of the div (ignoring the space occupied by the first image).
In case 2, second image is aligned to the exact center of the original div width.
Hope this will work.
.div_class{
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks
Try this:
<div id="main" style="text-align:center; width:100%;">
<div id="left" style="float:left;">
<img src="..." alt="..."/>
</div>
<div id="right" style="float:right; width:100%; text-align:center;">
<img src="..." alt="..." style="margin:0 auto;" />
</div>
<div style="clear:both; content:'.'; display:none" />
</div>
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%;}