http://jsfiddle.net/mXbfe/
Im trying to align the button with the input box without adding div tag. Can i do it just by CSS? i tried margin-top and padding-top on the input.submit but it doesnt work?
Here are the CSS:
#outer {
width: 50%;
display: table; /*padding: 1em 0 0; */
background: green;
}
#inner {
display: table-cell;
/*width: 100%;*/
background: red;
}
input {
width: 100%;
/*padding: .5em 1em;*/
}
Here are the HTML:
<div id='outer'>
<div id='inner'>
<label>Eat</label>
<input type='textbox'></input>
</div>
<input class='button_submit' type='submit'></input>
</div>
Change the input in your css to input[type=submit]
Move your display: table and display: table-cell declarations down a level: DEMO
#inner {
display: table;
}
input, label {
display: table-cell;
}
.button_submit {
width: auto;
}
you can make align the divs using display:table property. In your code you haven't apply any stlye for input button field.
Here is a Demo http://jsfiddle.net/kheema/mXbfe/24/
Have a look at this CSS.
#outer {
width: 50%;
display: table; /*padding: 1em 0 0; */
background: green;
}
#inner {
display: table-cell;
/*width: 100%;*/
background: red;
}
input[type="submit"]{display: table-cell;}
Related
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
I have equal height columns with centered content:
http://codepen.io/anon/pen/BzKwgE
<div class="cont">
<div class="item item-first">
<p>First</p>
</div>
<div class="item item-second">
<p>Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second </p>
</div>
<div class="item item-third">
<p>Third</p>
</div>
</div>
* {
box-sizing: border-box;
}
.cont {
width: 70%;
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 20px;
width: 33%;
}
.item-first {
background: blue;
}
.item-second {
background: green;
}
.item-third {
background: blue;
}
This is working great. However I also need my columns to have a 16x9 aspect ratio. In rare cases there will be a lot of content, in which case its OK to change the aespect ratio.
Ive got this working below however it stops the content being vertically centered:
http://codepen.io/anon/pen/pbyWMj
* {
box-siing: border-box;
}
.cont {
width: 70%;
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 20px;
width: 33%;
}
.item:before {
padding-bottom: 56.25%; // 16:9 ratio
display: block;
content: '';
float: left;
width: 1px;
}
.item-first {
background: blue;
}
.item-second {
background: green;
}
.item-third {
background: blue;
}
I can see that this is happening due to the padding hack. Is there a way to have equal height columns, vertically centered content, and the 16x9 aspect ratio?
Im supporting IE9. Ideally it would look the same, but a usable fallback is also acceptable.
You can use inline-block and vertical-align on the elements inside each item. Try this:
.item {
display:table-cell;
vertical-align:middle;
text-align: center;
width: 33%;
}
.item:before {
padding-bottom: 56.25%;
display: inline-block;
content: '';
width: 0;
vertical-align:middle;
margin-right:-4px;
}
.item p {
display:inline-block;
vertical-align:middle;
padding:20px;
}
Codepen Update
I want three divisions side bu side with the middle explanding and the other two positioned at the ends. So here is what I tried. The padding rule disturbs the positioning but its necessary. I want approach which works in all major browsers(So ruling out flexbox)
.Button {
width: 80%; /*Useless Rule*/
}
.Button > .left {
float: left;
background-color: blue;
padding: 5px;
}
.Button > .right {
float: right;
background-color: red;
padding: 5px;
}
.Button> .middle {
width: 100%;
background-color: green;
padding: 5px;
}
<html>
<body>
<div class="Button">
<div class="left"><</div>
<div class="right">></div>
<div class="middle">Middle</div>
</div>
</body>
</html>
I like to use the display: table on the parent, and the display: table-cell on the children. Then give the first and third child a width of 1px. It will then be only as width as its content.
.button {
display: table;
width: 100%;
}
.button>div {
display: table-cell;
text-align: center;
background: lightblue;
}
.button>div:nth-child(1),
.button>div:nth-child(3) {
width: 1px;
background: lightgreen;
}
<div class="button">
<div><</div>
<div>Middle</div>
<div>></div>
</div>
I am trying to place two img tags onto of each other but have them both centered.
Here is where im trying to do it: http://nathanturnbull.me/scrolldiv/home.html
The Html:
<div id="divs" class="div1">
<div class="textcont">
<img class="imglogo" src="gpk.gif" alt="GPK NET">
<div class="textcont" >
<img class="imgbutton" src="gpk.gif">
</div>
</div>
</div>
The css:
#divs, #div4 {
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
font-family: 'Cousine';
font-size: 80px;
color: #ffffff;
text-align: center;
}
.div1 {
display: table;
}
.textcont {
display: table-cell;
vertical-align: middle;
background-color: transparent;
}
.imgbutton {
height: 42px;
width: 84px;
}
.container {
text-align: center;
}
.container IMG {
display: inline; /* browser default */
}
or
IMG {
display: block;
margin: 0 auto;
}
Your images should be horizontally centred inside their container.
Remove the display:table-cell; statement from your .textcont CSS class.
See example.
I'm trying to set up a display that has an icon centered in a div. To the left and/or right is a variable amount of text. Example:
<div class="container">
<div class="left-text">This text is on the left</div>
<div class="icon-cell"><div class="icon smiley-face"></div></div>
<div class="right-text">And more text is over here...</div>
</div>
My goal would be for icon-cell to always be centered horizontally, presuming .container has a width of 100%.
I was using a table for a little while, but it wasn't possible to do:
<td style="width:50%"></td>
<td style="width:48px"></td>
<td style="width:50%"></td>
Any ideas on how to do this without using Javascript?
CodePen
You could use display: inline-block for the divs in conjunction with text-align: center:
.container {
width: 100%;
background: #eee;
text-align: center;
}
.container > div {
display: inline-block;
}
.container > .icon-cell {
width: 50px;
}
Example
There will occur problems, when you insert more text. Then you need to fix the width of your container-elements and eliminiate white-space between inline-blocks (I use font-size: 0). Here's another example:
More Text
This gives you a clean newspaper kind of look.....
.container {
width: 100%;
height: 300px;
}
.left-text {
position:absolute;
background: rgba(0, 255, 0, .2);
margin-left:0px;
top:0px;
padding-right:350px;
text-align:justify;
text-justify:auto;
}
.right-text {
position:absolute;
background: rgba(0, 0, 255, .2);
margin-right:0px;
top:0px;
padding-left:350px;
text-align:justify;
text-justify:auto;
}
.icon.smiley-face {
background: url(//placehold.it/48/48/00ff00);
height: 48px;
width: 48px;
margin:0px auto;
}
this trick may work
.icon{
width:100px;
margin:0 auto;
}
Use css float and align.
CSS:
.left-text { float: left; }
.right-text { float: right; }
.icon-cell { text-align: center; }
.container { display: inline-block; }
You can just use margins and display: inline-block; in css
I suppose I'm a bit late to the party, but this can also be done using display: table-cell;. Large amounts of texts should wrap rather than push the icon around and if you want padding for the "cells" you won't need to compensate for the width of the centered icon.
.container {
background: #eee;
display: table-row;
}
.container > div {
display: table-cell;
vertical-align: top;
width: 50%;
}
.container > .icon-cell {
min-width: 50px;
width: 50px;
}
.container > .icon-cell img {
width: 100%;
height: auto;
}
http://jsfiddle.net/Ljho1nx9/2/