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.
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I am styling a page with flexbox. I had a nicely centered image inside a div with a background image.
body {
width: 700px
}
nav {
width: 100%;
height: 50px;
background-color: #ccc
}
.wrapper,
.banner {
display: flex
}
.wrapper {
flex-direction: column
}
.banner {
background-image: url("https://unsplash.it/1000/600/?random");
background-repeat: no-repeat;
background-position: center center;
height: 300px;
}
.banner img {
height: 140px;
width: 140px;
border-radius: 140px;
border: 3px solid #fff;
align-self: center;
margin: auto;
}
<nav>
</nav>
<article class="wrapper">
<section class="banner">
<img id="profile-pic" src="https://unsplash.it/100/100/?random" />
</section>
</article>
See this codepen:
https://codepen.io/efbbrown/pen/PmOpWo
Now I want to add an x button so the user can change the background image if they please. When I add the button div it pushes the centered image out of position.
Added element:
<section class="banner">
<div class="close-button"></div>
<img id="profile-pic" src="https://unsplash.it/100/100/?random"></img>
</section>
See this codepen for full dilemma:
https://codepen.io/efbbrown/pen/PmOpOq
How can I add this x button to the div without changing the positioning of the center image?
Thanks!
Flex box will change the position and width of items based on the number of items contained inside the flex element. This means that when you add the close button, your banner image is now centering based on the remaining space, not the full width. You can "remove" an item from the flexbox formatting by changing it's position to absolute. That element is now ignored by the flexbox, as it will position it's self.
This should do the trick:
.banner {
/* ... */
position: relative;
}
.close-button {
/* ... */
position: absolute;
/* ... */
}
EDIT
Answer to questions from the comments below: Absolute positioning is not always determined by the width and height of the screen or window. It's actually determined by the closest 'positioned' parent, for example a parent marked as position: relative.
Using relative and absolute together is where absolute position really works well. In this example you can mark the banner class as position relative and wherever you move that div to, the close button will follow and position based on the banner div.
I am trying to center items (vertically and horizontally) within a div. I have looked around here and other places and can't seem to get anything to work. What I am looking for is to have each item centered both vertically and horizontally in its respective div. Notice that there are two navigation tiles on the left and 4 on the right (1 div per tile). The divs also have parent divs which I used to build the sticky footer. The challenge is that it needs to be responsive so I cannot used fixed pixels.
.absolute-center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
The above is what I tried to get the content centered. Its not working unfortunately.
Here's the fiddle: https://jsfiddle.net/jmc3t164/
Any help is greatly appreciated!
You have this structure (shortened for brevity)
<div class='top-half'>
<p class='absolute-center'>Time left to order</p>
</div>
<div class='bottom-half'>
<p class='absolute-center'>Add Produce</p>
</div>
Centering both vertically and horizontally is often acheieved by
.absolute-center {
position: absolute; /* note */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
BUT this requires that the parent element (in which the child will be centered) has position:relative.
So, you need to add that
.top-half {
width: 100%;
height: 50%;
position: relative;
}
.bottom-half {
width: 100%;
height: 50%;
position:relative;
}
JSFiddle Demo
<div id="blahblah" style="width:90%;margin:auto 5%"> content </div><br> blahblah can be any id you want, or not necessary.<br> You definitely need a width of something, ideally less than 100%; and divide the remainder from 100 by 2 and set it as margin. ( margin: auto is for up and down margings, the 5%, or whatever is for left / right.
Another way is to have a class .center{text-align:center} and assign it to your Div.
Finally, yet another is to insert a div under your position relevant div and style it with 'text-align:center.
Horizontally aligning a div-element within another div-element can be achived with margin: 0 auto; as long as they both have a width-property other than auto, but this does not apply for vertical alignment.
How can you vertically align a div within another div?
There are a number of different approaches to this, based on various ideas. Given that the element has a fixed height (in px, % or what have you), the best solution I've found so far is based on the following principle:
Give the parent div position: relative; and the child div position: absolute;, to make the child absolutley positioned in relation to the parent.
For the child, set top, bottom, left and right to 0. Given that the child also has a fixed width and height that is less than the size of the parent, this will push the browser into an impossible situation.
In comes margin: auto; on the child, as the browsers savior. The browser can now add enough margin on all sides to let the child-element keep its size, yet still fill out the entire parent as forced by top, bottom, left and right set to 0.
TADAAA! The element gets vertically and horizontally aligned within the parent.
Markup
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
A working example
http://jsfiddle.net/sg3Gw/
I find it easiest to use display:table-cell; vertical-align:middle; here's a jsfiddle
<style>
.a {
border:1px solid red;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="a">
<div>CENTERED</div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)
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;
}