the .menu div is centered (the left side of it is) I want it to center based on its width, but I cannot set it's width since it's based on Wordpress links. Same with height, I would like it exactly centered height/width.
css
.menu {
position: absolute;
left: 50%; top: 50%;
background: #fff;
}
.nav-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.overlay{
position: fixed;
display: none;
z-index: 50;
top: 0; left: 0;
height: 100%; width: 100%;
background: rgba(0, 0, 0, 0.85);
overflow: auto;
}
html
<div class="overlay">
<div class="nav-wrapper">
<nav class="menu">
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</nav>
</div>
</div>
You could center an absolutely positioned div by doing the following:
.menu{
position : absolute;
left : 0px:
right : 0px;
margin : 0px auto;
}
Of course, you could also use JavaScript for the same. What I gave is a CSS only method.
You could restructure your CSS so that the nav-wrapper is positioned absolutely, and use the text-align:center trick to center the block as such:
.menu {
display:inline-block;
background: #fff;
}
.nav-wrapper {
position: absolute;
width: 100%;
text-align:center;
top:50%;
transform: translateY(-50%);
}
.overlay{
position: fixed;
display: none;
z-index: 50;
top: 0; left: 0;
height: 100%; width: 100%;
background: rgba(0, 0, 0, 0.85);
overflow: auto;
transform-style: preserve-3d;
}
JSFiddle (display:none disabled): https://jsfiddle.net/Hybridx24/1u0fd3nn/
Because you can't/don't know the final width of the .menu element, the only way I can think of that lets you use the position: absolute with top: 50%; left:50% is if you calculate the element's width on page load and add the margins accordingly. e.g.
$('.menu').css('marginLeft', $('.menu').width() * -0.5);
Alternatively, you can keep your HTML and try the styles below, though I'm not sure where you need it aligned to vertically.
.menu {
// remove the absolute positioning and top/left
display: inline-block;
vertical-align: middle;
background: #ffffff;
text-align: left; // assuming you want its contents left aligned
}
.nav-wrapper {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
Related
I have two div the container to create an overlay 100% in the screen and the second one in the center of the screen whit some text.
I want that when the page is resized the text stay in the center of the screen. I showing and hiding the container on some event.
#container
{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100%;
width: 100%;
z-index: 999;
position: absolute;
}
#text
{
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
}
<div id="container">
<div id="text">some text here</div>
</div>
If you are looking for vertical align purpose. Go for display: table property
#container {
background-color: rgba(0, 0, 0, 1);
display: table;
height: 100%;
width: 100%;
position: absolute;
}
#text {
text-align: center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
}
<div id="container">
<div id="text">some text here</div>
</div>
Here your code..
HTML:
<div id="container">
<div id="text">some text here</div>
</div>
CSS
#container
{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100vh;
width: 100vw;
z-index: 999;
position: absolute;
}
#text
{
font:10px;
color:white;
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
}
Jquery:
$("body").click(function(){
$("#container").css("display","block");
});
#text {
position: absolute;
display: inline;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="text">some text here</div>
</div>
set position to 'absolute' and then left and top to 50% to locate div center of screen.
(if you don't want to locate div center of screen vertically then remove top: 50%).
then your div's left top corner will be center of browser.
To locate center of screen exactly move the div left the amount of half of its size and move to top half of its height.
Use display flex property.
#container{
display:flex;
align-items: center;
height:100%;
}
#text{
width:100%;
text-align:center;
}
Hope it'll help you out.
Hope this helps you.
jQuery(document).ready(function($) {
$("button").click(function(event) {
$("#container").show();
});
});
#container{
background-color: rgba(0, 0, 0, 1);
display: none;
height: 100%;
width: 100%;
z-index: 999;
position: absolute;
}
#text{
left: 0;
position: fixed;
right: 0;
text-align:center;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="container">
<div id="text">some text here</div>
</div>
<button>Show popup</button>
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.
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
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
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%;
}