How to center align an absolute positioned title that cant be of a fixed width?
Some titles can have 3 letters, but also 5,6 words.
So this code doesnt work properly
position: absolute;
margin-left:-205px;
left: 50%;
White container is the title I'm trying to align to the center of an image
http://s29.postimg.org/57cicvi2f/aaaaaaaa.jpg
First answer by #Nate is a good method to start with. Stretch the title via (left and right of 0) and apply text-align of center.
If shrinkwrapping behavior of an absolute block is important (i.e., it is desirable for the title to stretch only as far as its contents), then you can use translateX() transform method: http://jsfiddle.net/8h9Th/.
HTML:
<h1>Site Title</h1>
CSS:
h1 {
font: bold 24px/2 Sans-Serif;
padding: 0 24px;
color: #fff;
background-color: #000;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
you would need to give it a left position and a right position which are equal and then use text-align:center Here is an example:
HTML:
<div class="title">This Is A Title</div>
CSS:
.title {
position:absolute;
left:0;
right:0;
text-align:center.;
}
Related
I have a container div where height and width are set to 100% and position is relative. Inside the div I center an image (image is smaller than div) using display: block and margin:auto. Then I am attempting to center text inside the image using position: absolute, left: 45%, top 82px. Vertical alignment appears to be okay, but as the number of characters in text grows the text is no longer aligned in the middle. So in my image below if text is 4 characters the text would no longer be centered. Is there a better way to dynamically align text?
html:
<div id="countup-container">
<img id="countup-image" src="https://i.stack.imgur.com/9YqKE.png" alt="Accident Free Days">
<span id="ctl00" class="countup-text">101</span>
</div>
Relevant CSS:
#countup-container {
height: 100%;
width: 100%;
position: relative;
}
#countup-image {
display: block;
margin: auto;
width: 300px;
height: 240px;
}
.countup-text {
z-index: 100;
position: absolute;
color: black;
font-size: 40px;
font-weight: bold;
left: 45.3%;
top: 82px;
}
If you are using absolute positioning to center it you would want to change your left: 45%; to left: 50%; then set a transform like this:
.thing_to_center_horizontal {
top 82px;
left: 50%;
transform: translateX(-50%);
}
This will make it center even with dynamic content.
left: 50%; will put it in the center based on the top left corner of the content, then transform: translateX(-50%); will move it 50% of the content's width (this is the dynamic part) to the left making it center.
Make sense?
But maybe a simple text-align: center; might work, but its hard to tell because you did not post any code.
If I understand you, you could simply add text-align:center to your #countup-container.
And remove left:45% to your .countup-text
This question already has answers here:
Center text over an image in flexbox
(6 answers)
Closed 5 years ago.
I don't even know if this is possible using CSS only, but I have to ask.
PLEASE, read the specs before you provide an answer, accordingly. Thank you!
My markup:
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
Obviously, .wrapper will have the height of my img element, if that's a block.
Then, I need the p element to be centered horizontally and vertically inside the wrapper. I don't have a fixed width or height for the p element.
So, regardless paragraph size or even image size, it should be vertically and horizontally aligned, as is shown here http://i.imgur.com/phiR48H.png or here http://i.imgur.com/Xvdt42j.png.
If I set absolute position on the paragraph, it will not vertically align, because I cannot set negative margin if I don't know paragraph height.
I was thinking about table and table-cell (vertical-align: middle;), but I only have 1 cell. Any thoughts?
Added fiddle: http://jsfiddle.net/f3x7977z/
It's important that the provided solution have backwards compatibility, in special in IE8+.
Any suggestions on extra wrappers, for the sake of the final result, are welcome!
Explanation
Change the CSS property position of the wrapper to relative and of element you want centered to absolute.
Then position the element in the middle of the wrapper using top: 50% and left: 50%.
After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.
So we fix with the property transform: translate(-50%, -50%), which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.
Since we are taking IE8 into consideration, we will use a filter to achieve the same effect as the transform: translate.
In order to generate the filter attribute, the following resource was used: IE's CSS3 Transforms Translator
Example
.box {
margin: 10px;
display: inline-block;
position: relative;
}
.box span {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 1);
padding: 5px;
}
.box.translate > span {
transform: translate(-50%, -50%);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}
<div class="box translate">
<img src="http://placehold.it/500x200" />
<span>centered text</span>
</div>
How to Center Vertically and Horizontally Multiple Absolutely Positioned Child Elements
Other answers posted here already address the IE8 requirement. This answer offers an clean and efficient solution for people who don't care about IE8.
HTML (no changes)
<div class="wrapper">
<img src="http://placehold.it/350x150"/>
<p>My text, size unknowkn</p>
</div>
CSS
html, body { height: 100%; } /* necessary when using percentage heights within body
on non-absolutely positioned children (such as .wrapper)
http://stackoverflow.com/a/31728799/3597276 */
.wrapper {
height: 100%;
width: 100%;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
}
img {
position: absolute;
left: 50%; /* positions img relative to container */
top: 50%; /* positions img relative to container */
transform: translate(-50%, -50%); /* positions img relative to its height and width */
}
p {
position: absolute;
left: 50%; /* positions p relative to container */
top: 50%; /* positions p relative to container */
transform: translate(-50%, -50%); /* positions p relative to its height and width */
margin: 0;
}
DEMO: http://jsfiddle.net/f3x7977z/7/
There is a much more lightweight solution.
Take 50% of the outer element down from the top
margin up 50% of these 50% to the inside element to get on the center of bottomline of the outer element (see fiddle below)
.wrapper {
position: absolute;
top: 50%; left: 50%;
}
img { /* or a container with img and p */
margin-top: -25%; margin-left: -50%;
}
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
Check this solution
HTML
<div class="wrapper">
<img src="http://placehold.it/350x150"/>
<span></span>
<p>My text, size unknowkn</p>
</div>
CSS
.wrapper
{
position: relative;
}
p
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
In stead of the solution you should use this one
.wrapper {
position: absolute;
top: 50%; left: 50%;
}
img {
margin-top: -25%; margin-left: -25%;
}
In my layout, I am trying to output php generated items.
Each item retrieved from the database has a title, an image and a description.
I am trying to generate a layout that would have a thumbnail header composed of the img as a background (with the css style border-radius: 50%) and the title as a banner centered in the middle and taking the whole width. But using top 50% on the absolutely positioned div.title centers via the top edge and the div.title's height is dependent on font size.
I am wondering if there is a way to perfectly center the title, while keeping the border-radius effect considering that the only actual known dimension is the div.item's width and all height data is ultimately determined by .thumbnail-wrapper img and .title's font-size
the html is
<div id="container">
<div class="item">
<div class="thumbnail-wrapper">
<img />
<div class="title">Title</div>
</div>
<div class="content">Content</div>
</div>
</div>
The CSS
#container {
width: 600px;
}
.item {
position: relative;
display: inline-block;
width: 50%;
}
.thumbnail-wrapper {
text-align: center;
position: relative;
}
.thumbnail-wrapper img {
border-radius: 50%;
}
.title {
width: 100%;
position: absolute;
top: 50%; /* this is the problem */
}
Thanks!
JSFiddle example
Try this CSS for centering an absolutely positioned element (i.e. add it to div.title):
/* centering css */
top: 50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
Updated your JSFiddle Demo
Reference
I would like to center different images which are shown and hidden, depending on how the user clicks.
What I did to center an image was:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
which worked fine. But it does not work for a position: absolute; Is there a css only way to center a position: absolute div horizontally in the middle of body or parent without knowing the width?
For absolutely positioned element, you can set the margin:auto in combination with left:0 and right:0 (for horizontally centered) or top:0 and bottom:0 (for vertically centered):
img {
position:absolute;
left:0;
right:0;
margin:auto;
}
Demo.
Give the element position: absolute and position it 50% from the left edge of the screen, then use transform: translate to move it 50% of its width to the left.
Demo:
HTML:
<div class="center"></div>
CSS:
.center {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
Here's a pen with this.
Here's the browser support for 2d transforms, and information about which vendor prefixes you need.
You can also use transform: translate3d to center elements vertically with the same logic. The CSS would then look like this:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
The only way i know is using an additional div, like this:
http://jsfiddle.net/tTAG5/1/
HTML:
<div class="target">
<div class="wrapper"></div>
</div>
CSS:
.wrapper{
width:100px;
height:100px;
background:blue;
margin:0 auto;
margin-left:-50%;
}
.target{
position:absolute;
left:50%;
}
What this does is:
set left:50% on your main div
add your divs contents in another wrapper div element like shown in demo above
set margin-left:-50% on the wrapper div
You can use:
padding-left: 50%;
margin-left: -(half the width of your image)px
It's not the cleanest solution it's probably not the right scenario for absolute positioning.
I'm looking for a way to center a div horizontally in the page on Google Chrome.
I tried using margin: auto; but I've read that this function is not supported in Google Chrome. As a result my div stays aligned to the left side of the screen.
If I use, for example, margin-left: 100px; the div does move toward the center of the page, but I don't want to center it manually.
HTML:
<body>
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</body>
CSS:
body
{
background-color: #f0f0f0;
}
div
{
border-radius: 5px;
}
#header
{
position: fixed;
background-color: #3399ff;
color: white;
width: 60%;
margin: auto;
}
#header p
{
display: inline;
}
margin: auto will not work on a fixed (or absolute) position div. Instead you need to set left: 50% and the left margin to negative half of the element width.
#header
{
position: fixed;
width: 60%;
left: 50%;
margin-left: -30%;
}
http://jsfiddle.net/ZAqJM/
UPDATE: as of now most browsers will support transfrom: translate so you can comfortably do:
{
position: fixed;
left: 50%;
transform: translateX(-50%);
}
I know this is quite old but I think is worth mentioning that the following works like magic:
#header {
left: 50%;
transform: translateX(-50%);
}
For future references.
Centering a <div> using margin: auto; works cross browsers. You need to make sure the div that you're trying to center is contained in a block-level element.
<div class="headerContainer">
<div id="header">
<p>John Doe</p>
<p>email</p>
</div>
</div>
To properly center, your div#header needs to be block-level and must have a width and is a child element of a block-level element. (Technically <body> is block-level but you might want to maintain your header's "containership")
Therefore, remove the position: fixed from #header { ... }. Please see working example: http://jsfiddle.net/amyamy86/2sXdC/
margin:auto is for the object that has width and set the left-right margin equally.
Div is basically BLOCK with FULL-WIDTH (100%) so set margin:auto is doesn't get anything since the width is full to the parent.
To make it work, you can did that by 2 ways,
use text-align:center for div -> this will align text inside div center
include width property in div (i.e. width:200px) and it will work fine.