This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 5 years ago.
I have a welcome message which needs its centre to be positioned at 25% from the top of the window. Because it could be any number of lines long it needs to be positioned using its vertical centre. Here is what I have currently.
.welcomeMessage {
position: absolute;
text-align: center;
vertical-align: middle;
display: inline-block;
margin: auto;
width: 60%;
top: 25%;
}
I have tried using display: inline-block and display: flex with vertical-align: middle but neither position the div relative to its vertical centre. Any help would be greatly appreciated!
Desired positioning:
Current positioning:
In the snippet bellow I have two elements, both set to position:absolute with top: 25% and left: 50% .
.element as transform: translate(-50%, -50%); that allows him to center vertically and horizontally "exactly" at 25% of the page dimensions (height, width). Because unlike top and left, the transform property is based on the size of the target element. So the percentage you set refers to the size of the bounding box of the target.
.other in the other hand doesn't have a transform rule so it's not positioned like you wanted it to be, its top border sits at 25%
.element,
.other {
position: absolute;
text-align: center;
top: 25%;
left: 50%;
}
.element {
transform: translate(-50%, -50%);
color: green;
}
.other {
color: red;
}
html,body{
height:100%;
margin:0;
padding:0;
}
<div class="element">I'm at 25% middle</div>
<div class="other">I'm not at 25% middle</div>
Use transform:translate(-50%);
margin: auto; does not work with inline-block elements, so you need to add left:50% to make it horizontally center.
html,body{
height:100%;
margin:0;
padding:0;
}
.welcomeMessage {
position: absolute;
text-align: center;
vertical-align: middle;
display: inline-block;
left:50%;
width: 60%;
top: 25%;
transform:translate(-50%);
}
<div class="welcomeMessage">Welcome Message</div>
This should probably work. I defined the size for h1 as 2em and calculate the top position, decreasing 25% with half the font size.
.container {
width: 100vw;
height: 100vh;
background: lightgray;
}
.h1 {
font-size: 2em;
}
.welcomeMessage {
position: absolute;
text-align: center;
vertical-align: middle;
display: inline-block;
margin: auto;
width: 60%;
top: calc(25% - 1em)
}
<div class="container"></div>
<h1 class="welcomeMessage">Welcome</h1>
Related
I'm trying to center a text div on top of box div that has inline block. I tried using position: absolute on the text div. But when the browser screen is shrunk or expanded, the positioning of the text div gets messed up. How to fix this?
.mainDiv {
margin: auto;
width: 100%;
padding: 10px;
left: 300px;
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
}
.text {
background-color: blue;
position: absolute;
top: 70%;
left: 45%;
}
<div class="mainDiv">
<div class="box"></div>
<div class="text">text</div>
</div>
I assume you are using inline-block to center the .box inside the .main-div. Technically, with your current html structure you can't center the .text element on the .box one, but you can center it on .main-div, which is essentially the same thing in your example.
I would start by adding position: relative to .main-div. An absolutely positioned element is positioned based on it's nearest ancestor that has a positioning context. The easiest way to set this is to add position: relative.
Then with your .text element you can adjust to:
.text {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% );
}
This works because top and left position the top and left element from the top and left of its parent. So the top of .text would start 50% of the way down .main-div, and likewise with left. This would leave your text too far down and to the left.
transform: translate values work differently - they are based on the size of the element itself. So -50% will move an element back half of its width or height. By setting it on both width and height we are moving the .text so that instead of its top and left edges being at 50%, it's center is at 50%.
.mainDiv {
position: relative; /* added to make .text align relative to this, not the document */
margin: auto;
width: 100%;
padding: 10px;
/* left: 300px; (I removed this for demo purposes, but if you need it you can add it back in) */
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
}
.text {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50% ); /*pull the text left and up 50% of the text's size*/
}
<div class="mainDiv">
<div class="box"></div>
<div class="text">text</div>
</div>
The markup for text should be written first then the box. Then you may try using block instead of inline-block, then set the width of the text to 100 percent, display block and 'margin: 0 auto'. Also, maybe consider using the appropriate semantic tags as opposed to divs if you can. Also, I suspect the top and left rules to be causing the text to not align properly. You should no longer need position:absolute either.
If you want, you can make the blue div a child of the red div so that the blue div will always be relative to the red div. I also added position:relative to the red div, and used transform:translate to the blue div.
If I'm not mistaken, this is also responsive, so try shrinking your browser.
.mainDiv {
margin: auto;
width: 100%;
padding: 10px;
left: 300px;
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
position:relative;
}
.text {
background-color: blue;
position: absolute;
left: 50%;
transform:translate(-50%, -100%);
}
<div class="mainDiv">
<div class="box">
<div class="text">text</div>
</div>
</div>
.mainDiv {
text-align: center;
}
.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 19px;
}
.text {
background-color: blue;
position: absolute;
margin: -19px 0 0 36px;
}
<div class="mainDiv">
<div class="box">
<div class="text">text</div>
</div>
</div>
So I have an image on my website and I want to perfectly center it. I have tried many things but none have worked.
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
}
<img src="images/astronaut.png">
The simplest way to centre an image horizontally is with:
img {
display: block;
margin-right: auto;
margin-left: auto;
}
Like this?
body{
background-color: black;
}
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<img src="images/astronaut.png">
The centering codes are the left, top, and especially the transform
Have a look at the following links for further help, hope it helps.
https://www.w3.org/Style/Examples/007/center
https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
html {
width: 100%;
height: 100%;
background:url(http://tse4.mm.bing.net/th?id=OIP.IX1fAIIUJ82DtdfgR2tSnADhEs&w=207&h=276&c=8&qlt=90&o=4&dpr=2&pid=1.7) center center no-repeat;
}
Setting the left and right margin to auto will center the image horizontally within it's parent if your position isn't set or is set to relative.
So you could use:
img {
margin-top: 10%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 40%;
z-index: -5
}
If your position needs to be set to absolute, you can use CSS3's viewport sizing to center your image. This would place the image in the exact center of the page; so if you want to center the image within a sidebar, for example, don't use this method. You'll need to set a width for your image and then align it using the "left" property. That would look like this:
img {
position: absolute;
margin-top: 10%;
text-align: center;
height: 40%;
z-index: -5
width: 500px;
left: calc( 50vw - 250px );
}
The viewport is always 100vw wide, so setting the left property to 50vw - 1/2 of the image's width will center it on the page.
You can also use jQuery to similarly calculate the proper alignment and position the element.
You can put the image in a div and make it 100% of the screen in width and height.
Then add text-align:center; to center it horizontally.
Then set the line height to 100% and then add vertical-align: middle; to the image to center it vertically.
body{
background-color: black;
}
.CenterImage img {
height: 40%;
z-index: -5;
vertical-align: middle;
}
.CenterImage{
width:100vw;
height:100vh;
line-height: 100vh;
text-align:center;
}
<div class="CenterImage"><img src="images/astronaut.png"></div>
body{
background-color: black;
}
img {
position: absolute;
text-align: center;
height: 40%;
top: 50%;
left: 50%;
z-index: -5
}
<img src="images/astronaut.png">
As the title says, I would like to center an img in a div with a span beside it. The HTML is as follows:
<div>
<img src="http://www.openwebanalytics.com/wp-content/plugins/owa/modules/base/i/browsers/128x128/ie4.png">
<span>Text</span>
</div>
This is as far as I've gotten: https://jsfiddle.net/qhpfoqng/2/. As you can see, it centers BOTH as if they were one element, when I really just want it to center the img only. The end product should have the img centered horizontally in the div with the span to the right of it.
Just remove the span from the document flow by setting position: absolute; and then use some CSS magic to position it where you want it to be:
div {
width: 350px;
text-align: center;
position: relative;
border: 1px black solid;
}
img {
vertical-align: middle;
}
span {
font-size: 200%;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div>
<img src="http://www.openwebanalytics.com/wp-content/plugins/owa/modules/base/i/browsers/128x128/ie4.png">
<span>Text</span>
</div>
For that method to work, the surrounding div needs to be positioned (any position value other than the default static).
https://jsfiddle.net/qhpfoqng/4/
Add the css as follows:
div {
margin:0 auto;
width: 350px;
text-align: center;
border: 1px black solid;
}
jsFiddel Demo
You can do this:
Give width in percentage to your image
Then add margin-left also in percentage in way margin-left = 100% - image_width / 2
For this example, I used width: 40%, that means 100% - 40% / 2 = 30%; so margin-left: 30%, and that will center your image.
div {
width: 350px;
border: 1px black solid;
}
img {
width: 40%;
margin-left: 30%;
vertical-align: middle;
}
span {
font-size: 200%;
}
how to make absolute center horizontal and vertical a div with fluid width and height using css?
Thanks in advance for helping.
#div_parent{
background:#ccc;
position:relative;
}
.div_child{
background-color:#338BC7;
position: absolute;
left: 50%;
width: auto;
height: auto;
padding: 20px;
top:25%;
background: blue;
color: white;
text-align: center;
border:1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
A couple of problems with your code:
You do not have a width and height specified on your html and body, without which any of descendent elements wouldn't have a reference to set their positions and/or dimensions in percent units.
You do not have dimensions (width/height) specified on your #div_parent, without which you cannot position its absolutely positioned child (which is relative to it) to the vertical center. Moreover, as you want to position your .div_child to the center of the page, why do you have a parent wrapped around it anyway.
Apart from fixing the above, a trick which is usually used to align elements both horizontally and vertically is to use transform: translate to shift it back by 50%.
Like this:
.div_child {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
...
}
Fiddle: http://jsfiddle.net/abhitalks/Lnqvqnkn/
Snippet:
* { box-sizing: border-box; paddin:0; margin: 0; }
html, body { height: 100%; width: 100%; }
#div_parent{ height: 100%; width: 100%; background: #ccc; position: relative;}
.div_child {
background-color: #338BC7;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: auto; height: auto;
padding: 20px; color: white; text-align: center; border: 1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
When I need fluid width, I prefer using this method:
CSS
.background { display: table; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.background > div { display: table-cell; vertical-align: middle; text-align: center; }
HTML
<div>
<div>
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
Demo on jsfiddle.
Hope it works for you.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
I have been stuck with this annoying issue that I have...I cannot center a text inside a div.
I managed to get the text to BEGIN at the center, but I want the text in whole to be centered.
Here is my example - any tips and tricks are VERY appreciated.
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
}
#TEXT {
position: absolute;
top: 30px;
left: 50%
}
<div id="box">
<p id="TEXT">This text is not centered</p>
</div>
My example: http://jsfiddle.net/y97myrap/
<div style="text-align:center;">
data is here
</div>
in html5
use text-align:center;, this will work if you give width to the concerned div....
Make div 100% wide, then text-align:center; will push everything in center
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
}
#TEXT {
position: absolute;
top: 30px;
width:100%;
text-align:center;
<!-- left: 50% -->
}
<div id="box">
<p id="TEXT">This text is not centered</p>
</div>
try to remove position: absolute; from #TEXT
http://jsfiddle.net/y97myrap/4/
Fot centering an element using position absolute, the common way is set:
position:absolute;
left:50%;
margin left:{Minus half of the width of the element you want to center}
So, my suggestion for you case is the following:
http://jsfiddle.net/y97myrap/1/
using an outside container div and then adding text-align to that one,
and if you want to center the height as well, if the parent height is fixed you can just use a line height on the text the same height as the container, like this:
http://jsfiddle.net/y97myrap/5/
You can use display: table tecnique. Add table in container and table-cell in child element:
#box {
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 450px;
text-align: center;
margin: 0px 0px 0px -225px;
border: 2px solid black;
display: table;/*Add display table*/
}
#TEXT {
display: table-cell;/*Add display table cell*/
vertical-align: middle;/*add vertical-align middle*/
}
<div id="box">
<p id="TEXT">This text is not centered</p>
</div>
the problem in your fiddle is that you have position:absolute; and a left of 50%...I'm guessing u tried to center it this way, but the problem is the text block will start after 50%. Remove position, give it text-align:center;.
And to align it vertically consider using table cells
Remove the position:absolute and just add auto margings to your #TEXT:
#TEXT {
top: 30px;
left: 50%
margin-left: auto;
margin-right:auto;
}
#TEXT {
position: relative;
top:20%
}
Try it
It's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the width.
Code:
#box {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
It will make the position of the object fixed, you can adjust the positions of the div as per your need.
This code solved it:
#TEXT {
position: relative;
display: block;
text-align: center;
width: 100%;
top: 30px;
}