I am trying to align an image in a div to center. I have tried the following but its not working. Please tell me how to fix this . thanks in advance.
<div class="erabox"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>
<div class="erabox" style="text-align:center"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div>
just you need style="text-align:center" in your div tag.
Try with the following CSS code. It makes your <img> aligned center horizontally and aligned middle vertically.
.erabox{
width:200px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle;
}
Just use margin auto:
.erabox img {
display: block;
margin: auto;
}
DEMO: http://jsbin.com/apiwox/edit#html,live
Try below code in CSS. it will work for sure
align="absmiddle"
CSS
.erabox{
position:relative;
}
.erabox img{
position:absolute;
top:50%;
left:50%;
margin-top:-19px; /* Half of images height */
margin-left:-115px; /* Half of images width */
}
If .erabox div's width and height are fixed or at least it's height and width are always surely greater than image's you can use image as a background
HTML
<div class="erabox"></div>
CSS
.erabox{
background:url("indicator2.gif") no-repeat;
background-position:50% 50%;
}
Related
In CSS, how can I make a div as high as the entire page?
I want to make that div occupy the whole space of the webpage and put a background image in it.
SAMPLE FIDDLE: http://jsfiddle.net/apTFp/
div{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:#eeeeee;
}
This should work :)
You can do
#mainContainer {
width: 100%;
height: 100%;
background: url('imagePath'); //you can add a repeat or no repeat here
}
Hope it helps or somewhat you can style the body so that you will not specify the width and the height anymore, just the background image.
Do not need a div in the first place
Try
<body style="position: relative; margin: 0; background-color: Blue;">
<p>
Hello
</p>
</body>
Of course change background-color to background image
Try
<div id="foo"></div>
<script>
$("#foo").css("width", screen.width);
$("#foo").css("height", screen.height);
</script>
Another solution would be using the unit vh. 1 vh equals to 1% of the total viewport height. If you wanna learn more about units, you can checkout this article.
To make the div as high as the entire viewport, simply set height to 100vh.
div {
height: 100vh;
}
My image is staying at the top. Code using:
#header_div{
min-height:200px;
}
#header_div img{
display:block;
vertical-align:middle;
padding:5px 10px;
}
<div id="header_div">
<a href="#">
<img width="250" height="75" src="./images/header_logo.png" />
</a>
</div>
On a side note, should I close image tags with />?
#header_div
{
min-height:200px;
display: table-cell;
vertical-align:middle;
}
You will no longer need the vertical-align:middle; or display:block; on the img style and you probably can remove the top/bottom padding as well.
good write-up on centering an image in a box:
http://www.brunildo.org/test/img_center.html
vertical-align doesnt work like that. you can apply the image as a background-image to the parent div or to the anchor, and use background-position: center center.
if youd like an anchor's inline content to be centred vertically, one way to do it is to set the element's line-height in px to the total height required.
Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?
The image is semantically relevant so, it cannot be a background;
The html:
<div class="logo-organization-home">
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>
And the css:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;
Failed try:
http://cssdesk.com/pQnRG
Thanks
To center horizontaly, use: 'text-align:center' for .logo-organization-home
If the containing element has a width, you can use the following:
.logo-organization-home img {
display:block;
margin:0 auto;
}
Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.
Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:
.logo-organization-home {
float:left;
background-color: #fafaed;
border: 4px solid #f7f4ee;
width: 18%;
}
table{
width:100%;
height:100%;
}
td{
vertical-align:center;
text-align:center;
}
And the HTML:
<div class="logo-organization-home">
<table><tr><td>
<img src="images/logoOrganization1.png" alt="logo organization 1"/>
</td></tr></table>
</div>
Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.
Use a container div, which is centered, then its content you can give margin-left:npx - like so:
HTML
<div id="container">
<span id="green"> </span><br />
<span id="blue"> </span>
</div>
CSS
#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}
See the example coded up here - http://jsfiddle.net/Xpk8A/1/
give a wrapper with:
margin: auto;
position: absolute;
inside wrapper, put div:
position:relative;
left: -15px; (or whatever you want)
example page would help.
You can absolutely position your div and set the left attribute to 50%. Then, set the margin-left to 50% + 5px (whatever that is). This would only work if you have a fixed width on the box, however. For example, if the box is 200px wide, the margin-left would be -115px.
The key is to set width:100% and a fixed margin, as you can see in my example below
<style>
div {
background-color:red;
height:100px;
margin:0 auto;
width:100%;
margin-left:15px;
}
</style>
<div></div>
<html>
<body>
<div class="centered">
<div class="offcenter">
</div>
</div>
</body>
</html>
The css will be:
.centered
{
margin: 0 auto;
width:300px;
height:200px;
background-color:red;
}
.offcenter
{
background-color:blue;
width:285px;
height:inherit;
float:right;
}
http://jsfiddle.net/evbbq/
You can use display:inline-block for center the DIV then give your margin to it .
Like this:
.Parent{text-align:center;}
.Child{
display:inline-block;
text-align:left;
width:200px;
height:150px;
background:red;
margin-left:15px;
}
Check this fiddle http://jsfiddle.net/Xpk8A/2/
Remove margin-left:15px then click on Run button in the fiddle to see the different.
I have a div with following style: height:250px;scroll:auto;. I want it to scroll after 250 px but should have height according to the content in it.
For example, if the content in it is 100px, then, the height of div should be 100 without scroll. But, if the height exceeds 250px, it should show scroll.
How can do it?
Is this what you are after?
Demo
CSS:
.dyn-height {
width:100px;
max-height:250px;
overflow-y:scroll;
}
height: optional - just for the demo.
try this: max-height should do the trick.
html
<div class="height">
blah<br/>
blah<br/>
</div>
css:
.height { max-height:250px; border:1px solid red; overflow:auto; }
Use overflow-y with the auto option.
This way the scroll bar will not show up until it is needed.
Otherwise the scroll bar will display, even if you do not need it to show.
.my_div {
width:100px;
max-height:250px;
overflow-y:auto;
}
just try max-height and do overflow-y:scroll just it
.hidden {
width:100px;
max-height:250px;
overflow-y:scroll;
}
<div class="hidden">
<h5>If the content in this div exceeds 250px it should appear a scroll bar</h5>
</div>