Simple html below. The purpose is to make left span height 100% of outer div height and than center its text vertically (i.e. "abc" should become one one line with "ghi"). Result on the screenshot (chrome, win10): styles has no effect.
"row-eq-height" used to make columns of same height and are copied from here.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div style="display: table;">
<div class="row row-eq-height">
<div class="col-md-6" style="background-color: lightblue">
<span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span>
</div>
<div class="col-md-6" style="background-color: lightcoral">
def<br/>ghi<br/>jkl
</div>
</div>
</div>
</div>
</body>
</html>
How should I fix it to make span 100% of height?
UPD: SOF's "run snippet" shows span with 100% height but not centered text. Wonder why result differs from chrome.
Use the following style for parent div to center the text of child div/span :
style="display: flex;align-items: center;"
In your code,change the following line:
<div class="col-md-6" style="background-color: lightblue;">
into
<div class="col-md-6" style="background-color: lightblue;display: flex;align-items: center;">
you can use div instead of span, but giving span display:block can do the trick
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span{
display:block;
}
</style>
</head>
<body>
<div class="container">
<div style="display: table;">
<div class="row row-eq-height">
<div class="col-md-6" style="background-color: lightblue">
<span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span>
</div>
<div class="col-md-6" style="background-color: lightcoral">
def<br/>ghi<br/>jkl
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
I am trying to create a webpage for an imaginary pizzeria as practice. I want to insert the header of the webpage in between two images(same) such that the three(image, header, image) elements are in line. But with the code below I am getting a screen like this. How do I get them all on one line?
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div style='float:right'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<hr style='clear:both;' />
</body>
This can be done using display: flex and justify-content: space-between:
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
<div class="header">
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<div>
<img src='body.png' style='width:100px; height:100px;'>
</div>
</div>
I've added a container div and given it the class header and applied the flexbox to it.
You can simply do this :
header {
text-align: center;
}
h1 {
font-size: 25px;
display: inline-block;
vertical-align: top;
margin-top: 25px;
}
img {
display: inline-block;
width: 100px;
height: 100px;
margin:0 10px;
}
<header>
<img src='https://lorempixel.com/100/100/'>
<h1>Ralph's Pizzeria</h1>
<img src='https://lorempixel.com/100/100/'>
</header>
<hr>
Here's another solution if you want to continue to work with float.
Simply move the 2nd image to before the title.
<body>
<div style='float:left'>
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='float:right'> <!-- Just moved this up here -->
<img src='body.png' style='width:100px; height:100px;'>
</div>
<div style='font-family:amita; font-size:20px;'>
<h1 align='center' style='margin-bottom:5px;'>Ralph's Pizzeria</h1>
</div>
<hr style='clear:both;'/>
</body>
However, I suggest using flex-box if you don't have to support older browsers.
I have the following
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
Text that<br>literally<br>spans<br>4 lines
</p>
</div>
</div>
</div>
and css
.box-cell
{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
So the problem that I am facing is that one of the cells is usually taller than the other.IS there any way for me to equalize how much height each cell takes up?
Searching didn't yield me which property I can manipulate to get same height :(
Here is jsfiddle
However in this fiddle I can not get them to be side by side to prove my point
EDIT: I guess I didn't specify it properly. I would like to have the borders be as tall as the tallest cell. So all the examples provided here actually take out the borders and instead color the background. If I do that then yes it gives illusion of every cell being the same, but I would like there to be a border of same height.
I tried replicating what it sounds like you are looking for.
I would recommend you mess around with flexbox since it seems to do exactly what you are looking for.
<div class="myc">
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
<div class="col">
<p>Text of some sorts</p>
<p>Text of some sorts</p>
<p>Text of some sorts</p>
</div>
</div>
And for the CSS
.myc {
display: flex;
}
.col {
background-color: yellow;
margin-right: 20px;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-4" style="background-color: green">
some content
</div>
<div class="col-xs-6 col-sm-4" style="background-color: orange">
some content
<img src="http://placehold.it/100x120">
</div>
<div class="col-xs-6 col-sm-4" style="background-color: magenta">
some of content
</div>
</div>
Some options to solve it:
Different Tricks on How to Make Bootstrap Columns All the Same Height
<style type="text/css">
.box-cell{
position: relative;
margin: 3px;
border-style: groove ridge ridge groove;
border-width: 3px;
background-size: cover;
}
</style>
<div class="row">
<div class="col-md-6">
<div class = "box-cell">
<p>
Slightly short text
</p>
</div>
</div>
<div class="col-md-6">
<div class = "box-cell">
<p>
<span>Text that</span>
<span>literally</span>
<span>s4 lines</span>
<span>ygthfg</span>
</p>
</div>
</div>
</div>
1- you need to add text in span tag.
2- Or take text in one line .
For example, I have following html:
<html><head>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.col-1{
height: 300px;
}
.col-2{
/*
height: 100% not working, how to stretch col-2 like col-1
*/
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1">
</div>
<div class="col-md-6 col-2">
</div>
</div>
</body></html>
Height of container is auto, but actual height is defined, because col-1 height is 300px. How to set col-2 height 100% of actual parent height?
You have to add .row outside of any col-* because col-* have float attribute. To make the same height of col-*, add .row-eq-height with this style:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
The HTML is like this:
<div class="container">
<div class="row row-eq-height">
<div class="col-md-6 col-1">
a
</div>
<div class="col-md-6 col-2">
b
</div>
</div>
</div>
DEMO
Maybe you should try to use "row row-eq-height" classes.
Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>
And add this CSS property to your custom CSS
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
min-height:100% usually works.
<html>
<head>
<style type="text/css">
.container {position:relative;height:600px;width:100%;background-color:black;}
.col-1{float:left;width:50%;height:300px;background-color:red}
.col-2{float:left;min-height:100%;width:40%;background-color:green}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-1"></div>
<div class="col-md-6 col-2"></div>
</div>
</body>
</html>
Here is a sample:
https://jsfiddle.net/001cbskq/
You are using bootstrap but I am not in this example.
I'm making a header with Bootstrap. My page-header contains an image and text. I want the text to be vertically centered in the header. It seems like an easy, fix, but I'm running into trouble. I made a custom class called v-align where I set the vertical-alignment: middle;, but it's not working. Any suggestions?
Image:
HTML:
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<div class="row">
<img class="col-xs-4"src="Popcorn.png" width="100" height="auto" >
<div class="col-xs-8 v-align">
<h2>Sparky's Movie Theater</h2>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Css Class:
.v-align {
height: 100%;
display:table-cell;
vertical-align: middle;
}
I was able to get my text to be vertically aligned by adding the following to my css code:
CSS:
#box {
height: 100px;
line-height: 100px;
text-align: center;
}
#spantext {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
HTML:
<div class="col-xs-8" id="box">
<h2 id="spantext">Sparky's Movie Theater</h2>
</div>
Remove the padding and margin in <H2>
h2{
margin:0;
padding:0;
}