So I have been working on my first website, and I'm having lots of fun doing it.
However, I have found it very difficult to achieve centering a paragraph (spanning more than one line) vertically and horizontally inside of it's div container.
The div has a proportional width (96%), and it is not set by pixels. Also, the paragraph has a set amount of padding (ex: 20px top and bottom).
Is there a trick to center vertically and horizontally in this situation?
Thanks a bunch!
See this fiddle - http://jsfiddle.net/zv2Pu/1/
I have centered p both horizontally and vertically within the div container.
Hope this helps!
From you 2 examples:
a single container inside a sized box:
you can use a pseudo to vertical-align pseudo and inside boxe aside each others
DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
text-align:center;
}
.holder:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.holder p {
display:inline-block;
vertical-align:middle;
width: 70%;
margin: 20% auto;
text-align:left;
}
A single or several boxes inside a sized box:
you can use display:table-cell; DEMO
.holder {
width: 96%;
height: 400px;
border: 1px solid black;
display:table-cell;/* it will expand if content grows oversized */
vertical-align:middle;
}
.holder p {
width: 70%;
margin: 10px auto;
}
.holder div {
width: 70%;
margin: 10px auto;
}
You could have simply used text-align: center; on your div.
Related
I need to center image inside my div but when i use some code it will change my other code and that is like magic circle.
My HTML http://textuploader.com/d40ta
My CSS http://textuploader.com/d40t5
Images are inline-block by default. That means you can center them inside a block-level parent by using text-align: center. <div> or <p> elements, to name a few, are block-level by default, but you can make almost any element block-level by applying display: block to that element.
If the image is display: block already, you can center it by applying margin: 0 auto where the auto is the functional value (the first value could be any unit, adding margin to the top and bottom of the image).
CSS3 Solution:
Simply modify the below CSS class.
.iui {
border: 2px solid black;
width: 200px;
height: 200px;
border-radius: 100px;
top: 20px;
display:flex;
justify-content:center;
align-items:center;
background-color: red;
margin-left: auto;
margin-right:auto;
}
JSFiddle Demo
CSS Solution:
In the below solution, we need to set the CSS property line-height the same as that of the element height for the class iui. Then we need to set the image inside the div with the CSS properties display:inline-block;vertical-align:middle, this will center the image.
.iui {
border: 2px solid black;
width: 200px;
height: 200px;
line-height: 200px;
border-radius: 100px;
text-align: center;
background-color: red;
margin-left: auto;
margin-right:auto;
}
.iui img{
vertical-align:middle;
display:inline-block;
}
JSFiddle Demo
I have a div meant to contain all content on said site, an image I have nested into the div doesn't want to center and I'm not sure why?
here is the CSS.
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
}
#intro {
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
intro is the id given to said img, it just floats to the left of the div( id is wrapper) and wont center even though I have right and left margins set to auto?
The problem with margin: auto; is that it will only center block level elements ... and img is by default displayed as inline and follows the text flow (to the left). If you add display: block to it it should work:
DEMO
#intro {
display: block;
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
This way you don't need to centrally align the text of the wrapper element.
But if you want to center all inline children of the the wrapper - just use text-align:center on the #wrapper ... however then you may need to have line breaks before and after the images or some text could end up next to them and push them out of the center =)
DEMO
Use text-align: center on main container:
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
text-align: center;/*Add text-align center*/
}
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
I'm working with a div that's only holding text. It's using absolute positioning to center itself on top of an image div that is using relative positioning . I can center the div horizontally in CSS if I use
div {
text-align:center;
width:100%;
}
But when I try to center it vertically using
div {
text-align:center;
height:100%;
}
it doesn't vertically center. I'm guessing this is because text-align:center only specifies horizontally.. How could I get around this? I've seen a couple solutions that would work if the outer div is a fixed size, but the outer div is not a fixed size. It's fluid so I need this to work fluidly as well. I've tried using top:50% but I want it perfectly centered... I'm pretty inexperienced so go easy on me
As you guessed, you are right, text-align: center; is used to align the text/element horizontally only and not vertically... so if you are talking about aligning the single line text vertically than you need to use line-height, which will be equal to the container height
Demo
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
line-height: 100px;
text-align: center; /* Forgot this in the demo */
}
Where as if you are looking to vertical align entire element, than you can use either position: absolute; which I won't suggest you, instead use display: table-cell; nested inside display: table; parent
Demo 2
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Try this...
div { position:absolute; top:50%; }
and go through
http://phrogz.net/CSS/vertical-align/index.html
Try this one. Make the code as
div { text-align:center; line-height:100%; }
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.