I've got this structure:
<div id="preview">
<div class="small">preview</div>
<div id="prev_content"></div>
</div>
and the following CSS rules:
#preview {
position:absolute;
display: table;
top:160px;
left:10px;
width:457px;
height:125px;
max-width: 457px;
max-height: 125px;
border-radius: 20px;
background-image:url(../images/preview_greetings.png);
color: #FFF;
font-family: shofar;
font-size:27px;
padding-right:130px;
padding-left:20px;
overflow: hidden;
}
#preview div.small{
position: absolute;
top:-40px;
left:0px;
text-align: center;
width:607px;
color:black;
font-size:30px;
}
#prev_content{
max-width: 100%;
overflow: hidden;
max-height: 102px;
display: table-cell;
vertical-align: middle;
}
but for some reason, if I have overflow text, it just keeps expanding the div and doesn't stop.
Here's a fiddle:
http://jsfiddle.net/sTGpf/
How can I make it stop growing when it has reached it's limitation? The reason im using table display is because I need vertical alignment.
display:table-cell is causing the height to expand based on content. Use a wrapper around the div and set the required style for vertical alignment. And for the DIV with actual content, set the max-height:102px;
#prev_content{
max-width: 100%;
max-height:102px;
}
#wrapper
{
vertical-align:middle;
display:table-cell;
max-height:102px;
}
Fiddle
Instead of using display: table to center, you could use Centering in the Unknown.
Demo
#preview {
height:125px;
font-size:0; /* To avoid extra spaces */
}
#preview:before {
content: '';
height: 100%;
}
#preview:before, #prev_content {
display: inline-block;
vertical-align: middle
}
#prev_content{
overflow: hidden;
max-height: 102px;
font-size: 27px;
}
Remove display: table-cell; from #prev_content and it will respect the max-height: 102px;
Demo: http://jsfiddle.net/sTGpf/3/
Related
I have multiple images with different images which I need to display within a overview grid. The images do have totally different dimensions and ratios and the wrapper for these images is always the same height and width.
I'd like to position the images always within the center of the wrapper but that doesn't work.
I use that for the image
.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
margin: auto;
float: none;
border: none;
}
and for the wrapper that one
.content_page .slide_content .product {
width: 27%;
float: none;
display: inline-block;
margin: 30px 3%;
position: relative;
height: 400px;
overflow: hidden;
border-top: 1px solid #121224;
}
Very small or wide images now do get aligned at the top of the wrapper as margin:auto doesn't seem to work. What can Id do there?
.content_page .slide_content .product {
width:<some width>;
height:<some width>;
position:relative;
}
.content_page .slide_content .product > img {
max-width:100%;
max-height:100%;
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;
}
Set margin left and right as auto and use vertical align middle
.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
display:inline-block;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
float: none;
border: none;
}
I want divs to go from left to right but also to be evenly distributed in the content of the page with width: 100%;
Can this be done in CSS without using any JS or Display:Flex which actually allows you to do it with flex-direction .... but its not compatible with IE8 and IE9!
#container {
width: 100%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#container:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
div {
width: 27%;
display: inline-block;
zoom: 1;
position: relative;
background-color:lightblue;
text-align:center;
color:red;
height:100px;
border:1px solid black;
margin: 10px;
}
p {
maring:0;
padding:0;
line-height:80px
}
<div id="container">
<div><p>A</p></div>
<div><p>B</p></div>
<div><p>C</p></div>
<div><p>D</p></div>
<div><p>E</p></div>
<div><p>F</p></div>
<div><p>G</p></div>
<div><p>H</p></div>
</div>
Here is my code.
So basically ... The first div to be always on the left, the 3rd to be always on the right and the one in the middle. But everytime you add a new div it should be added from left to right. Not left > right > middle.
Already have the correct answer from #Sofiene DJEBALI.
Add float:left; to your div in your css :
div {
width: 30%;
display: inline-block;
zoom: 1;
position: relative;
background-color:lightblue;
text-align:center;
color:red;
height:100px;
border:1px solid black;
margin: 10px;
float:left;
}
https://jsfiddle.net/bvgn46hu/28/
I have a jsfiddle here: http://jsfiddle.net/apej60nL/
I have two columns in bootstrap. One column has text as content the other is empty apart from a yellow div that is repersenting an image.
I need to center the yellow div vertically against the text block. To do this I need to make the left div containing the yellow div the same height as the text div.
I have done this with
.test .row {
display: table;
}
.left, .right {
float: none;
display: table-cell;
vertical-align: top;
}
I positioned the yellow div absolutely and used negative margins to center it. I can do this because I know the width/height of the yellow div. I need to do this without knowing the width/height. The image/div could be different dimensions.
How can I center it vertically with knowing the size?
Make the top/right/bottom/left positions of the yellow block (image) zero, and the margin auto:
.block {
background: yellow;
position: absolute;
height: 150px;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
width: 50px;
}
jsFiddle example
Without knowing the width/height, here is an example:
.block{
background: yellow;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%)
transform: translate(-50%,-50%)
}
Demo
I have made a couple of changes to your CSS to achieve what you're looking for:
.left, .right {
float: none;
display: table-cell;
//deleted vertical-align: top;
}
.left{
background: red;
vertical-align:middle; //replaced position: relative; with this
}
.right{
vertical-align: top; //add this
background: #ddd;
}
.block{
//various changes here, will be centered horizontally and vertically
background: yellow;
margin-left: auto;
margin-right: auto;
text-align: center;
}
JS Fiddle Demo
Note: if you want to constrain either the width of the block div then add a max-width style.
see it.
$(document).ready(function(){
var l=$('.left').height()-50;
var t=l/2;
$('.block').css('top',t);
});
http://jsfiddle.net/srvnk44/apej60nL/22/
vertical-align: middle works nicely with table cells, but I had to change the yellow box to display: inline-block:
.test .row {
display: table;
}
.left, .right {
float: none;
display: table-cell;
}
.left {
background: #F00;
vertical-align: middle;
text-align: center;
}
.right {
background: #DDD;
vertical-align: top;
}
.block {
background: #FF0;
display: inline-block; /* display changed to inline block */
text-align: left; /* text align is inherited so reset it */
}
Updated Fiddle
I have two DIVs inside a parent div. I want them to be:
So I searched for examples of this because it is such a trivial problem. I tried a few examples from SO but it didn't seem to make any difference for my example. I tried vertical-align: middle; and inline-block but without any success. Here is my fiddle.
http://jsfiddle.net/Sz2fU/1/
HTML
Play A
CSS
.parentBox
{
height: 100px;
}
.left_box
{
display: inline-block;
vertical-align: middle;
background:green;
float:left;
}
.right_box
{
width: 18%;
height: 100%;
display: inline-block;
vertical-align: middle;
background:blue;
float:right;
}
.inputBox
{
height:80px;
}
In order for vertical-align to work in a table we will have to use table-cell
Try this:
Add display:table; and width:100%; to .parentBox
Remove float from .left_box and .right_box
Add display: table-cell; and text-align:center; to .left_box and .right_box
You needed to add text-align:center; to center the input to the middle.
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
The trick here is to use display: table for the parent div and display: table-cell for the children; otherwise, vertical-align is not respected.
JSFiddle: DEMO
.parentBox {
width: 100%;
height: 100px;
border: 1px solid lime;
display: table;
}
.left_box,
.right_box {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.left_box {
background:green;
}
.right_box {
width: 18%;
height: 100%;
background:blue;
}
.inputBox {
height:80px;
}
Add line-height: 100px to the parent div. Vertical-align:middle refers to line-height, so setting it up to the height of the block will do the job. Just don't forget to reset line-height to normal on children (otherwise, they will be with line-height: 100px too and if text in it more than one line you get huge block).
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}