I have to get my content div vertical centered in my header div, and i also dont need space around the content div because i did have it working but it would take up width 100% everytime. Here is my code
#header {
position: absolute;
width: 100%;
height: 15%;
background-color: white;
z-index: 10;
overflow: hidden;
display: table;
}
#content {
display: table-cell;
overflow: auto;
vertical-align: middle;
padding: 0px;
margin: 0px;
float: left;
}
h1 {
display: inline-block;
margin: 0px;
}
<div id="header">
<div id="content">
<h1>Jari Rengeling</h1>
</div>
</div>
Not really sure if this is what you are trying to achieve:
https://jsfiddle.net/pf8oujj6/
Use
display: inline-block;
use display:flex with align-items:center on #header .
is this what you are looking for ?
#header
{
position: absolute;
width: 100%;
height: 30%;
background-color: green;
z-index: 10;
overflow: hidden;
display: flex;
align-items:center;
}
#content
{
overflow: auto;
vertical-align: middle;
padding: 0px;
margin: 0px;
float: left;
}
h1
{
display: inline-block;
margin: 0px;
}
<div id="header">
<div id="content">
<h1>Jari Rengeling</h1>
</div>
</div><!-- #header -->
Remove float left in the content.
https://jsfiddle.net/4tc95oy0/
#content
{
display: table-cell;
overflow: auto;
vertical-align: middle;
padding: 0px;
margin: 0px;
}
Float transform youre element in display block override the previous declaration of display table-cell.
Related
I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
I am giving a width to a div with display table cell property but it is not working .
My code is
<header class="header layers">
<div class="wrap">
<h1 id="title"><?php echo $blogtitle;?></h1>
</div>
</header>
And the css is
.layers {
position: absolute;
display: table;
top: 0;
left: 0;
overflow: hidden;
box-sizing: border-box;
table-layout: fixed;
}
.wrap {
height: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
display: table-cell;
vertical-align: middle;
width: 1040px;
}
.header {
height: 80px;
width: 100%;
}
#title {
font-size: 30px;
color: black;
font-family: 'Roboto', sans-serif;
}
But i don't know why it is not working this time i have used it many time with no problem . When i see the width of the wrap class in inspect element it is setting it to 100% with no error .
Please help . Appreciate any anwser and comment .
The fiddle link is this https://jsfiddle.net/yashag/zhsxLhzj/
As requested in the comments, here is an example of using display: flex (flexbox) to vertically-align text (as you were trying to do with display: table-cell). You can also specify width and height of a flexbox easily, like a normal block element.
As you can see, the display:flex element correctly vertically-centers the text, and can be set to a 1040px width correctly.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
div#container {
display: flex;
align-items: center;
height: 100%;
width: 1040px;
}
div#centered {
height: 20px;
width: 100%;
text-align: center;
}
<div id="container">
<div id="centered">Vertically-centered using <code>display: flex</code>.</div>
</div>
I have the following image in a div
<div id="left-control">
<img src="img/icons/ic_next_3x_re.png" />
</div>
Here is the css
#left-control {
height: 100%;
float: left;
}
#left-control > img {
display: block;
margin: 250px 0;
z-index: 1;
}
But for some reason I can't seem to vertically center the image no matter what CSS I try. Any suggestions?
There isn't an amazing way to accomplish this, but what is below should do the trick.
#left-control {
float: left;
height: 100%;
}
#left-control:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#left-control img {
vertical-align: middle;
z-index: 1;
}
Here is a simple fiddle. Keep in mind that I manually set the height for the #left-control element in this example since fiddle wasn't allowing for 100%.
You can use CSS tables to accomplish this.
.wrapper {
display: table;
height: 300px;
border: 1px solid black;
}
#left-control {
height: 100%;
display: table-cell;
vertical-align: middle;
}
#left-control > .img {
display: inline-block;
width: 100px;
height: 100px;
z-index: 1;
background: red;
}
<div class="wrapper">
<div id="left-control">
<div class="img"></div>
</div>
</div>
you could wrap the img, inside another div like so..
<div id="left-control">
<div class="vert-align">
<img src="img/icons/ic_next_3x_re.png" />
</div>
</div>
then, in the css do something like this...
#left-control {
height: 100%;
position:relative;
}
#left-control > img {
display: block;
margin: 250px 0;
z-index: 1;
}
.vert-align{
position: absolute:
margin: auto:
top:0; left:0; right:0; bottom:0;
height: 100px;
}
you can play with top left right and bottom properties to set it to the desired position.
I need to center an element within a div while there is another element nearby. When I use text-align center, it places the element close but it's not going exactly where I'd like due to another element nearby. I want the logo element to center exactly while the social element floats to the right.
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
float: right;
}
#social img {
width: 25%;
display: inline-block;
}
<div id="header">
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</div>
See this fiddle
To make the logo div centralize irrespective of the div taht holds the social link, you'll have to make the logo div absolute positioned.
Now, to make the absolute positioned logo div centered, you'll have to add left:0;right:0 to the CSS.
The revised CSS is as follows
CSS
#logo {
width: 30%;
margin: 10px auto;
position: absolute;
left: 0;
right: 0;
}
Try add this:
#logo {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
alternatively if #logo would have width: 100px; then position: absolute; left: 50%; margin-left: -50px;
Add center tag and remove float:right from social
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
}
#social img {
width: 25%;
display: inline-block;
}
<div id="header">
<center>
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</center>
</div>
I have a problem. I want to achieve something like this:
I have a div with fixed height, and 2 other divs inside, with variable / unknown height, which I want to have
a) vertically centered
b) floating left /right
Right now I am trying something like this.
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
Everything is perfectly centered, but the right div is next to the left one, and not on the right side. As soon as I start to put in
float: right;
into my right class, it is on the right side, but not centered anymore. And I have no clue how to achieve this.
Thank you in advance!
There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.
EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/
Try using Flexbox, e.g.
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.left {
display: inline-block;
vertical-align: middle;
background: red;
}
.right {
vertical-align: middle;
background: green;
}
http://jsfiddle.net/hafpuvtq/
More info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to set the html, body elements of height: 100% and margin and padding of 0 outside the container class first before declaring any of the following classes:
HTML
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
top: 50%;
height: 100px;
}
.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2 {
height: 100px;
width: 100px;
background-color: green;
float: right;
}
The left and right both have to contain floats; left box for float: left; and right box for float: right;
That's right - floating an element removes it from the document flow, so it can't align itself to its parent element's line-height. Instead, put a wrapper div around each of the two child elements, and float the wrappers, left and right respectively. Make sure their height is 100%, and then vertically align the children inside them, as you currently are.
See http://jsfiddle.net/conLs2fd/6/.
this answer is just css
.wrapper {
position: relative;
height: 200px;
border: 1px solid gray;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
display:inline-block;
}
.right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: gray;
display:inline-block;
}
<div class="wrapper">
<div class="left child">This is left</div>
<div class="right child">This should be right</div>
</div>
Here is one way of doing it that involves using text-align: justify on the .wrapper parent block. If you can specify the height of .wrapper, you
can set line-height to the same value of the height.
Add a :after pseudo-element of height: 0 to force a second line for the line box containing the elements, which will allow the justification to work.
.wrapper {
border: 1px dotted gray;
height: 100px; /* for demo only */
line-height: 100px;
text-align: justify;
}
.wrapper:after {
content: '';
display: inline-block;
height: 0;
width: 100%;
}
.left, .right {
border: 1px dotted blue;
line-height: 1.2;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>