I am having a parent and child container, where I need to align the child container to middle(both horizontal and vertical).
HTML:
<section class="travelPlace">
<div>
</div>
</section>
CSS:
.travelPlace {
width: 50%;
height: 100%;
float: left;
}
.travelPlace > div {
width: 53.4375%;
margin: 0 auto;
background: url('../images/globe.png') center no-repeat;
height: 344px;
background-size: contain;
}
.travelPlace {width: 100px; height: 250px; position:relative;background:black;}
.travelPlace > div {position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fff;
background: red;
height: 19px;
text-align: center;
display: block;
width: 100%;}
Hope it was helpful.Rajesh
Maybe you can do something wih this code, I made the background yellow and the content red to make it easier to see.
.travelPlace {width: 50%; height: 800px; background: yellow;}
.travelPlace > .something {width: 53.4375%; background: red; height: 344px; margin-top: -172px;}
.travelPlace > .somepusher{
display: inline-block;
height: 50%;
width: 100%;
}
<div class="travelPlace">
<div class="somepusher"></div>
<div class="something">
</div>
</div>
Basicly what I did:
Add a new div which is 50% the height of the main Div, then add a negative margin to the top of your inner div which is 50% the height of the inner div (172px)
You could use display:table-cell for your parent item and display: inline-block to your child item. Here is a snippet...
.travelPlace {
display: table-cell;
width: 50%;
height: 100%;
vertical-align: middle;
text-align: center;
background: black;
padding: 50px 0px 50px 0px;
}
.place {
display: inline-block;
width: 300px;
height: 300px;
text-align: left;
background: #CCC;
}
<section class="travelPlace">
<div class="place">
</div>
</section>
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 trying to add padding to my .slotIcon class. My .slots class is the container, witch is inline-block with another div, trying to make both divs side by side (50% width).
This is all under the "work" section.
Now padding doesn't affect the icons, and margins move the entire .slots div.
All I want to do is slightly lower the icon and text, in the .slots div.
https://jsfiddle.net/js1rgh4b/1/
<div class="work" >
<h2>Work</h2>
<div class="slots">
<div class="slotIcon"></div>
<p>Slots</p>
</div><div class="OEA">
<div class="OEAicon"></div>
<p>OEA</p>
</div>
</div>
Css:
.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
}
.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
}
.slotIcon {
width: 150px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}
.OEAicon {
width: 200px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}
https://jsfiddle.net/js1rgh4b/1/
Please Try This,
.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
padding-top:60px;
}
.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
padding-top:60px;
}
You can set padding to .slots and .OEA div ,this will make the text and the icon come down. And instead of display: inline-block , you can use float:left to make the div's align side by side.
DEMO
CSS:
.slots {
float:left;
width: 50%;
height: 350px;
background-color: #3484ce;
padding:60px;
}
.OEA {
float:left;
padding:60px;
width: 50%;
height: 350px;
background-color: green;
}
If you give a padding to .slots, it works. You would need to do the same for .OEAicon if you want them to be similar. If not, then do vertical-align: top; in .OEA.
There are two divs. I want the inner div to be vertically centered, without giving margins, as I want height of inner div to be auto, because its content can change and height can increase.
Here are the two divs:
Outer div:
.frontleft{
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
}
Inner div:
.c1{
height: auto;
width: inherit;
}
Thanks.
You can use Flexbox. display: flex on parent and align-self: center on the child item will center it vertically.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
background: #2C2955;
display: flex;
}
.c1 {
height: auto;
width: inherit;
background: #4C5FB1;
align-self: center;
}
<div class="frontleft">
<div class="c1">Center</div>
</div>
Why don't you use a table instead? With vertical-align in td tag.
<html>
<body>
<table class="frontleft">
<tr><td>I am a sentence</td></tr>
</table>
</body>
</html>
You should position inner element absolute and use transform property for vertical centering.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
position: relative;
background: orange;
}
.c1 {
height: auto;
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: blue;
}
<div class="frontleft">
<div class="c1">test</div>
</div>
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
How do I horizontally center a fixed-width div within a percentage-width div?
For example in this fiddle, I'd like the Google logo centered.
<div class="box">
<div class="image">
<img src="http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png" />
</div>
<div class="text">Hello</div>
</div>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
}
http://jsfiddle.net/FloatLeft/g2u4E/
I've looked at various 'solutions' online and I haven't found anything that worked.
you can center the logo easy by setting background image for the div and change the background size as you need :
.box .image {
height: 160px;
width:400px;
background-color:#ff1769;
background-image: url('http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png');
background-size:47% 100%;
}
see FIDDLE
I would do this:
.box .image {
height: 160px;
width: 100%;
background-color:#ff1769;
background-position:center center;
}
Add the image as a background image.
http://jsfiddle.net/g2u4E/5/
<style>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
margin:auto;
}
.box .image img{
height: 100%;
width: 100%;
}
</style>
A div with fixed or % width can be aligned to center of its parent container by applying
margin:0 auto;
For Eg:
#divToCenter{
height: 160px;
width: 400px;
margin:0 auto;
}