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.
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 have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive. Currently, only the max-width on the centered one works.
See this jsFiddle.
How do I make the right div responsive too?
HTML:
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
CSS:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 100%;
max-width:300px;
height:300px;
display: inline-block;
vertical-align: top;
}
#right {
background:yellow;
width:100%;
max-width:300px;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
}
The idea is to use flexbox. And add a pseudo element for left column, in order to make the middle one in the center with your existing markup.
JSFiddle Demo
#container {
display: flex;
}
#container:before, #middle, #right {
border: 1px solid red;
flex: 1 1 0;
}
#container:before {
content:"";
}
#middle {
max-width: 100px;
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Responsive</div>
</div>
You can accomplish what you want by doing something like this: JSFiddle
Only problem is your middle div has to have a fixed width but using media queries you can forget about that. Keep in mind that calc browser support could be better (although there are polyfills).
#middle {
position: relative;
margin: 0 auto;
height: 300px;
width: 340px;
background: #ddd;
text-align: center;
}
#right {
position: absolute;
top: 0; right: 0;
width: calc(50% - 170px);
background: red;
}
#media screen and (max-width: 340px) {
#middle {
width: auto;
max-width: 340px;
}
#right {
display: none;
}
}
BEFORE EDIT
max-width is not working on elements where position is set to absolute.
What exactly do you want do accomplish with absolute and also, what kind of layout do you want to get in the end?
remove the max-width from right div. also you have to set a percent less than 100% but totally 100% to make sense to responsive divs:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 80%;
max-width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
}
#right {
background: yellow;
width: 20%;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
#middle {
width: 100%;
}
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</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>
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>
An example of my code can be found on JSFiddle http://jsfiddle.net/WdZgV/
CSS
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.header_div {
display: inline-block;
width: 100%;
text-align: center;
}
.header {
display: inline-block;
height: 100px;
width: 100%;
max-width: 1000px;
background: #ddd;
}
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float: left;
width: 800px;
height: 100px;
background: #999;
}
</style>
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
What i want is that when you resize the window width to less than 1000px the .menu div resize to the size of the parent div.
So as an example:
If you have your window width as 900px, the .logo div has 200px and the .menu div has 700px.
Is there anyway i can do this with CSS, or i need to use Javascript?
Yes — remove the float, don't specify width, and set overflow to hidden. Example here; .menu becomes:
.menu {
height: 100px;
background: #999;
overflow: hidden;
}
#Andoni Roy Use this
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float:right;
overflow:hidden;
height: 100px;
background: #999;
}
You may not want to play with floating properties but specifying the parent width and display to table.
Like in the following example: http://jsfiddle.net/A8zLY/745/
You would end up having something like:
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
CSS
.header_div {
width: 1280px;
}
.header {
display: table;
}
.logo {
display: table-cell;
width: 280px;
}
.menu {
display: table-cell;
width: 1000px;
}
You could specify width in percentages.