I have a small problem but I can't get it solved.
I have a content header of 864px width, a background image repeated-y and footer image.
Now I have this <div> over the background image and I want it to be like 855px width and the text align left but yet aligned center so it fits in the bg.
I once had it oke width some padding left but I figured out that was the correct padding for my screen resolution.
Soo briefly it is:
Setting a div width - align the div center - align its text (content) left.
Set auto margins on the inner div:
<div id="header" style="width:864px;">
<div id="centered" style="margin: 0 auto; width:855px;"></div>
</div>
Alternatively, text align center the parent, and force text align left on the inner div:
<div id="header" style="width:864px;text-align: center;">
<div id="centered" style="text-align: left; width:855px;"></div>
</div>
Try:
#your_div_id {
width: 855px;
margin:0 auto;
text-align: center;
}
Use auto margins.
div {
margin-left: auto;
margin-right: auto;
width: NNNpx;
/* NOTE: Only works for non-floated block elements */
display: block;
float: none;
}
Further reading at SimpleBits CSS Centering 101
All of these answers should suffice.
However if you don't have a defined width, auto margins will not work.
I have found this nifty little trick to centre some of the more stubborn elements (Particularly images).
.div {
position: absolute;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
}
Related
I'm trying to horizontally and vertically center a header on top of an image. So far I've got the vertical centering down (which is the reason for the relative and absolute positioning). However, the horizontal centering is giving me problems now: margin:0 auto; doesn't work, left:50%; doesn't work and text-align:center doesn't work. Does anyone know how to horizontally center the header on top of the image?
Details:
I don't know the height or width of any of the elements, so I can't use fixed heights or widths
Setting the image as a background is not an option because the image is part of the content
Not all headers will be a similar length, so I have to find a dynamic solution (they will all be one line though, I'll cut them off with an ellipsis)
HTML
<article>
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</article>
CSS
article {
position: relative;
}
h2 {
line-height: 0;
position: absolute;
top: 50%;
left: 0;
margin: 0;
padding: 0;
}
It's here: http://jsfiddle.net/kmjRu/21/
You can set the article to display: inline-block and width: auto, then center the h2:
http://jsfiddle.net/kmjRu/28/
This question already has answers here:
Centering images in a div vertically
(3 answers)
Closed 9 years ago.
I have two columns in my HTML page.
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
Each of them occupies half of the page
#left {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
I want to center a picture in the right column. I know that I can make it horizontally centered by doing margin-left: auto; margin-right: auto;. How can I make it vertically centered?
The first issue I see is that there is no height specified for the height of the left and right divs; height should be set to 100% or any value to your liking. To vertically center the image, we can use absolute-positioning. We would set the dimensions for the image (which is good practice in any case) and then set the top:50% and left:50% attributes. This would push the image outside the box though, so we add negative margins that are half the width and height of the image. This will vertically and horizontally align the image in a div every time!
Here's the updated CSS:
#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}
Take a look at this JSFiddle: http://jsfiddle.net/bYF7F/2/.
I know this question has been marked as answered, but you did mention that the height and width on the image was not ideal. So i would like to suggest another solution.
Add:
display: -webkit-flex;
display: flex;
to the right div, and:
margin: auto;
to the image. I think this is what you were after. See fiddle http://jsfiddle.net/Fqa7b/
If you use a TABLE instead of a DIV it will center automatically.
I have a web page that has two columns one I have to float left and the other float right which works fine on a regular webpage. However when I view it on a phone for example(I have mobile jquery and css) So it all fits to the dimension of the screen. And since the two column page doesn't fit, it puts its on the next line, which then looks wrong because the column on the right is then aligned right on the next line. What is the best way of aligning it left and right without using the float css property. I think I should be able to do this by either setting the margin or padding using a percentage. Any ideas on the best way to do this?
Set a minimum width to the body so that the two divs fit on the same line.
body{
min-width: 800px; //or whatever the size of the two divs is
}
You're probably doing it right, but you want to remove the float properties on mobile devices, and remove the width if you previously set it so they fit the full screen, and apply margins (if necessary).
#media screen and (max-width: 480px) {
.floated-div {
float: none;
width: auto;
margin: 0 1em;
}
}
You can read more here: http://css-tricks.com/css-media-queries/
Here is a jsbin (http://jsbin.com/funevi/2/edit?html,css,output) showing how to align two items on the same row without using floats or flexbox. To make matters better, using inline-block instead of floats allows the left and right content to be vertically aligned relative to each other.
The default is to be top aligned relative to each other. But adding the class vmiddle or vbottom to the containing div.left-right element will cause the left content box and the right content box to be aligned with each other.
box-sizing: border-box allows us to use logical numbers safely across browsers and helps prevent the contents from wrapping around if borders or margins are added to the left or right content divs.
When using inline-block elements, to prevent what appears to be white space around the left and right content elements, the container specifies a font size of 0. The font size is then set to initial for the content divs.
Lastly the colors are set on the left and right content divs simply to make it visually apparent how the left and right vertically align relative to each other and are not required, obviously.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.left-right {
box-sizing: border-box;
display: inline-block;
font-size: 0;
position: relative;
white-space: nowrap;
width: 100%;
}
div.left-right div.left,
div.left-right div.right {
box-sizing: border-box;
display: inline-block;
font-size: initial;
position: relative;
white-space: normal;
width: 50%;
vertical-align: top;
}
div.left-right.vmiddle div.left,
div.left-right.vmiddle div.right {
vertical-align: middle;
}
div.left-right.vbottom div.left,
div.left-right.vbottom div.right {
vertical-align: bottom;
}
div.left-right div.left {
background: firebrick;
text-align: left;
}
div.left-right div.right {
background: forestgreen;
text-align: right;
}
</style>
</head>
<body>
<div class="left-right">
<div class="left">
<p>Paragraph 1</p>
</div>
<div class="right">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</div>
</body>
</html>
I have a div with image "image.jpg".
By using text-align=center, the image is being centered horizontally.
However it's not vertically aligned. How would I implement the vertical alignment?
<div style="vertical-align: middle;text-align:center;">
<img title="Title3" src="image.jpg" style="display: inline;" id="idImage">
</div>
Use the vertical-align property as described in this article. Note that in order to get vertical-align to work you need to do display: table-cell as well.
div.centered {
display: table-cell;
vertical-align: middle;
text-align: center;
/* other styling */
}
Where I've given your <div> the class name of centered.
Also you shouldn't use text-align for centering, but instead add margin: 0 auto; to the image styling.
EDIT
HTML:
<div class="centered">
<img src="..." class="centered-image" />
</div>
CSS:
div.centered {
display: table-cell;
vertical-align: middle;
}
img.centered-image {
margin: 0 auto;
}
If you set the height of the parent container and set your margin-top: auto, it should align to the middle I think. This works with horizontally aligning, but I haven't tried with vertical. Anyways, it would avoid absolute positioning
As mentioned before, you can also use javascript to find the height, then set the margin, something like this:
var image = document.getElementById("myImage");
var imgHeight = image.style.height;
image.style.marginTop = -(imgHeight/2);
image.style.top = 50%; //you can probably just set this in css and omit this line
you must of course set
#myImage{
position: absolute;
}
though
You have to know the dimensions for this to work (or use javascript to get the dimensions if you'll have different ones). This will also center the image horizontally (so you don't need your text-align=center )
Taken from css-tricks
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
height and width are that of the image in question and the top and left margins are set at half the respective height and width.
As of now, I can horizontally center the image, but once I try to vertically center it (adding top-margin), the parent div also moves down as well (which is what I don't want).
Here is an image of what I am talking about: Screenshot
I think the best option would be to set it to an absolute position, but then I am having issues horizontally centering it.
<div id="header">
<div id="container">
<div id="logo">
<img src="images/logo.png" />
</div>
</div>
</div>
#container {
width: 960px;
margin: 0 auto;
position: relative;
}
#logo {
height: 96px;
width: 484px;
margin: 50px auto;
}
Help would be greatly appreciated! Thank you
You could put overflow: hidden on the #container. It will introduce a new block formatting context, so the margins are not collapsed anymore.
jsFiddle Demo
The magic of overflow: hidden
Can overflow:hidden affect layout?
From what I see, the container is not going lower (nor it shouldn't), it's just the logo (due to the margin) that it's going lower.
Where do you want to center the image, on the header?
Give the header a fixed height and use margin or padding to center your image.
If the header's height needs to be fluid, then you could go with
#container {
width: 960px;
margin: 0 auto;
position: relative;
vertical-align: middle;
display: table-cell
}
hope that helps!
R