Usually this code works, but for some reason it's not vertically centering within it's parent element. Could this be because of the background image?
http://jsfiddle.net/tmyie/BcmNw/
<div class="background-image">
<div class="omg-title">This is the title</div>
</div>
CSS:
.background-image {
background-image: url('');
height: 600px;
background-size: contain;
position: relative;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
text-align: center;
}
.omg-title {
padding: 15px;
-webkit-transform: translate(-50%, -50%);
position: absolute;
}
Since you are using position: absolute you can remove transform and set the text to center with the following changes:
.omg-title {
top: 50%;
left: 50%;
position: absolute;
}
To perfect center horizontally you should know the width of the text, for example if it's 100px you should apply margin-left: -50px;
An example of the second solution http://jsfiddle.net/7ScDh/
If you just take away all of .omg-title's styling, it centers fine because .background-image has text-align:center;.
JSFiddle for proof
Remove the position and transform property and it will work for you:
.omg-title {
padding: 15px;
}
Try either of these, or remove absolute positioning:
1) center .omg-title div
.omg-title {
left: 50%;
position: absolute;
margin-left: -50px; // depending on width
}
2) give .omg-title div full width:
.omg-title {
width: 100%;
}
EDIT: For vertical allignment, try (demo here: http://jsfiddle.net/6E5as/):
.omg-title {
top: 50%;
position: absolute;
margin-top: -10px; // depending on height
text-align: center;
width: 100%;
}
Related
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">
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
I have a layer with an image inside:
<div id="foo"><img src="url" /></div>
and it is fixed positioned:
#foo {
position: fixed;
}
but I also want the layer to be horizontally centered in the page. So I've tried:
http://jsfiddle.net/2BG9X/
#foo {
position: fixed;
margin: auto
}
and
http://jsfiddle.net/2BG9X/1/
#foo {
position: fixed;
left: auto;
}
but doesn't work. Any idea of how to achieve it?
When you position an element to fixed, it gets out of the document flow, where even margin: auto; won't work, if you want, nest an element inside that fixed positioned element and than use margin: auto; for that.
Demo
Demo 2 (Added height to the body element so that you can scroll to test)
HTML
<div class="fixed">
<div class="center"></div>
</div>
CSS
.fixed {
position: fixed;
width: 100%;
height: 40px;
background: tomato;
}
.center {
width: 300px;
margin: auto;
height: 40px;
background: blue;
}
Some will suggest you to use display: inline-block; for the child element with the parent set to text-align: center;, well if that suffice your needs, than you can go for that too...
.fixed {
position: fixed;
width: 100%;
height: 40px;
background: tomato;
text-align: center;
}
.center {
display: inline-block;
width: 300px;
height: 40px;
background: blue;
}
Demo 2
Just make sure you use text-align: left; for the child element, else it will inherit the text-align of the parent element.
Use transform: translate(-50%, 0);
Example Code: http://codepen.io/fcalderan/pen/uJkrE
CSS
div {
position: fixed;
border: 3px #555 solid;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
Try the following.
#foo {
position: fixed;
left: 50%;
width: 30%;
transform: translate(-50%, 0);
}
Fiddle
this way not cross browser you must set percent width for layer e.g width:30% and set left:35% and right:35% and position:fixed
this is better and work on all browser RTL and LTR
i have problem with positioning image
<div class="foto img-thumbnail">
<img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png">
</div>
the css file
.foto {
background-image: url('member/37/foto_profile/large.jpeg');
height: 300px;
background-repeat: no-repeat;
background-size:cover;
background-position:
center center;
width: 100%;
}
.tengah {
position: absolute;
}
GREEN = class tengah
RED = class foto
i want the image (RED) positioning center of div
when i change css like
.tengah {
left: 50%;
top: 50%;
position: absolute;
}
it returning the center of image
anybody can help me?
thanks before :)
I think you're talking about centering the .tengah div in the .foto.
If so, then you need:
.foto {
background-image: url('member/37/foto_profile/large.jpeg');
height: 300px;
background-repeat: no-repeat;
background-size:cover;
background-position:
center center;
width: 100%;
position: relative; /* ADDED */
}
.tengah {
left: 50%;
top: 50%;
position: absolute;
margin-top: -30px; /* ADDED */
margin-left: -30px; /* ADDED */
}
The margins are half the width and height of the <div> you want centered.
A cleaner method that will adapt to different size screens would be to avoid the "position:absolute" altogether by setting auto margins left and right for the .tengah class:
.tengah {
position: relative;
margin-left: auto;
margin-right: auto;
top: 50%;
}
This style class will auto center the image/div. The "top" can be adjusted a little depending on the image length if "vertical-align" is not used.
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}