So I centered my text. But now there is a white space between body and the div. This is the HTML:
.parent-aligner {
background: #f2f2f2;
width: 100vw;
height: 500px;
text-align: center;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
I think what causes this is the width: 100vw;. But when I change it to width:100%; the text isn't centered anymore. Any suggestions on how to fix this?
Deduct the width of the scrollbar from the viewport width for smaller screen sizes...
EDIT: Add max-width property.
(And also remove the margin on body)
body {
margin: 0;
}
.parent-aligner {
background: #f2f2f2;
width: 100vw;
max-width: 100%;
height: 500px;
text-align: center;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
try this
.parent-aligner {
background: #f2f2f2;
width: 100%;
height: 500px;
text-align: center;
display:table;
}
.parent-aligner .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
<div class="container-fluid">
<div class="parallax">
<div class="parent-aligner">
<div class="aligner">
<p class="textcontent">lorem ipsum text</p>
</div>
</div>
</div>
</div>
Related
I got pretty close to what I want however I think the 32vh is what's ruining my size.
When I use img {height: 100%;} they become too big so I settled down for 32vh; However the left and right div are a few pixels off. It's especially noticeable if you zoom in a little (press ctrl+'+'). It happens on both firefox and chrome. I tried using 50% and 100% height on the images and putting position relative on testB but it didn't seem to help. How do I make both size equal height? I don't mind if there's extra pixels between the right two divs but they must be same height as left aka div a
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
text-align: center;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
}
.testB {
background-color: green;
flex-grow: 1;
line-height: 32vh;
position: relative;
}
.testC {
background-color: royalblue;
vertical-align: top;
margin-bottom: 10px;
}
.testD {
flex-grow: 1;
background-color: purple;
vertical-align: bottom;
margin-top: 10px;
}
.test img {
vertical-align: middle;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32vh;
}
.testD img {
vertical-align: bottom;
height: 32vh;
}
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/300x500">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/300x500">
</div>
<div class="testD">
<img src="https://placehold.it/300x500">
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/500x300">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/500x300">
</div>
<div class="testD">
<img src="https://placehold.it/500x300">
</div>
</div>
</div>
I hope this is what u r expecting:
<style>
body * {
box-sizing: border-box;
color: white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
}
.testA {
background-color: black;
width: 61.5%;
display: inline-block;
padding-right: 18px;
line-height: 65vh;
text-align: center;
}
.testB {
background-color: green;
flex-grow: 1;
display: flex;
flex-direction: column;
line-height: 32vh;
text-align: right;
position: relative;
}
.testC {
display: flex;
align-items: center;
justify-content: center;
background-color: royalblue;
vertical-align: top;
}
.testD {
display: flex;
align-items: center;
justify-content: center;
background-color: purple;
flex-grow: 1;
vertical-align: bottom;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32.5vh;
}
.testD img {
vertical-align: bottom;
height: 32.5vh;
}
</style>
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/300x500">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/300x500">
</div>
<div class="testD">
<img src="https://placehold.it/300x500">
</div>
</div>
</div>
<hr>
<div class="test">
<div class="testA">
<img src="https://placehold.it/500x300">
</div>
<div class="testB">
<div class="testC">
<img src="https://placehold.it/500x300">
</div>
<div class="testD">
<img src="https://placehold.it/500x300">
</div>
</div>
</div>
not quit sure if I understand your question, but here is my approach.
Use "background-image" instead and then background-size: cover;
<style>
body * {
box-sizing: border-box;
color:white;
}
.test {
margin: 0 auto;
position: relative;
height: 65vh;
width: 80vw;
display: flex;
}
.testA {
background-image: url(https://placehold.it/500x300);
width: 61.5%;
}
.testB {
background-color: green;
flex-grow:1;
line-height: 32vh;
text-align: right;
position: relative;
}
.testC {
background-image: url(https://placehold.it/500x300);
margin-bottom: 6 px;
background-size: cover;
}
.testD {
background-image: url(https://placehold.it/500x300);
margin-bottom: 10px;
background-size: cover;
}
.test img {
vertical-align: middle;
}
.testA img {
height: 100%;
}
.testC img {
vertical-align: top;
height: 32vh;
}
.testD img {
vertical-align: bottom;
height: 32vh;
}
</style>
<div class="test">
<div class="testA">
a
</div>
<div class="testB">
<div class="testC">
c
</div>
<div class="testD">
d
</div>
</div>
</div>
I want to center vertically text, when the elements height is unknown?
html
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
css
/* CSS used here will be applied after bootstrap.css */
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
Elements "Ex1, Ex2" count is unknown, so, if there are more of those, obviously, the table row will get bigger in height. I need some solution, that would be responsive to this also...
https://www.codeply.com/go/bp/4ZEUS7Q7lm
Just add row-ht-eq class to row <div class="second-row">
CSS:
.row-ht-eq {
display: flex;
align-items: center;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
Also you can play with:
display: table-cell;
vertical-align: middle;
Note: Use span Element as helper.
Html:
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
Css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Full Code:
.table{
text-align: center;
padding-top: 70px;
padding-left: 0px;
padding-right: 35px;
}
.table-resp{
border: 1px solid green;
overflow-x: hidden;
}
.text1{
float: left;
display: inline-block;
}
.second-row{
line-height: 30px;
clear: left;
min-height: 30px;
overflow: auto;
}
.left-col-text{
height: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table">
<div class="table-resp">
<div class="second-row">
<div class="col-md-5">
<span class="helper"></span>
<div class="left-col-text">
Center vertically
</div>
</div>
<div class="col-md-7">
<div class="right-col-text">
<div class="example">Ex1</div>
<div class="example">Ex2</div>
<div class="example">Ex3</div>
</div>
</div>
</div>
</div>
</div>
Change your text class to:
.left-col-text {
margin:0 auto;
}
This will automatically decide equal distance from top to bottom.
.row {
width: 100%;
height: 150px;
}
.col {
display: inline-block;
margin: 0 auto;
height: 150px;
}
#left {
float: left;
width: 30%;
height: 150px;
background-color: red;
}
#center {
width: 40%;
height: 100%;
background-color: green;
}
#right {
float: right;
width: 30%;
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
I have read so many posts but still cannot make this work. I am missing something. I want to have these three divs in my header. The center div should be centered in the middle of the page and it will be a image. The other divs will be on the left and right and a combination of text and images as desired. I want all 3 divs to have their content vertically and horizontally centered. How do I do this and maintain some responsiveness for users on div browser and screen sizes. Responsiveness is secondary issue, getting the content aligned is the main challange. Thanks,
You can use display: table for row and display: table-cell for columns
.row {
width: 100%;
height: 150px;
display: table;
}
.col {
width: 30%;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left {
background-color: red;
}
#center {
width: 40%;
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
You could use CSS3 flexbox for it:
.row, .col {
display: flex;
justify-content: center;
align-items: center;
}
.col {
height: 200px;
flex: 1 100%;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
JSFiddle
I can't understand, why text on left panel go top?
https://jsfiddle.net/c13Lb7ka/
and how move link-text in front of hovered background?
<html>
<head>
<title>ssssssss</title>
<style>
html, body{
height: 100%;
}
.flat_menu_wrap{
display: table;
width: 75%;
height: 50%;
}
.flat_menu_wrap div{
text-align: center;
vertical-align: middle;
}
.flat_menu_wrap a{
vertical-align: middle;
color: #f00;
font-size: 15px;
font-weight: 600;
display: block;
height: 100%;
}
.f_r_wrap{
width: 100%;
height: 100%;
}
.flat_cell_l{
display: table-cell;
width: 40%;
background-image: url("http://numberimage.ru/img/tst/wood.png");
}
.f_r_t_wrap{
display: table;
width: 100%;
height: 100%;
}
.f_c{
position: relative;
display: table-cell;
background-size: cover;
min-height: 100px;
}
.f_r_t_1{
background-image: url("http://numberimage.ru/img/tst/furnit.png");
}
.f_r_t_2{
background-image: url("http://numberimage.ru/img/tst/frezer.png");
}
.f_r_b_wrap{
display: table;
width: 100%;
height: 100%;
}
.f_r_b_wrap > div{
background-size: cover;
min-height: 100px;
}
.f_t{
display: table;
}
.f_r{
display: table-row;
}
.f_r_b_1{
background-image: url("http://numberimage.ru/img/tst/metal.png");
}
.f_r_b_2{
background-image: url("http://numberimage.ru/img/tst/tools.png");
}
.f_r_b_3{
background-image: url("http://numberimage.ru/img/tst/repair.png");
}
.f_s_a{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
.f_s_a:hover{
background-color: rgba(129, 129, 129, 0.38);
}
.f_t_m{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="flat_menu_wrap">
<div class="f_t f_t_m">
<div class="f_r">
<div class="flat_cell_l f_c">
wodd dfdfd dfd
</div>
<div class="f_c">
<div class="f_r_wrap f_t">
<div class="f_r">
<div class="f_c">
<div class="f_r_t_wrap">
<div class="f_r">
<div class="f_r_t_1 f_c">
<a class="f_s_a" href="/go776.html"><span></span></a>
wodd dfdfd dfd
</div>
<div class="f_r_t_2 f_c">
reload answer next
</div>
</div>
</div>
</div>
</div>
<div class="f_r">
<div class="f_c">
<div class="f_r_b_wrap">
<div class="f_r">
<div class="f_r_b_1 f_c">
wodd dfdfd dfd
</div>
<div class="f_r_b_2 f_c">
<a class="f_s_a" href="/g53333333333355o.html"></a>
reload answer next
</div>
<div class="f_r_b_3 f_c">
reload answer next
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you are trying to center your text so it is vertically centered, simply remove height: 100%;
.flat_menu_wrap a{
vertical-align: middle;
color: #f00;
font-size: 15px;
font-weight: 600;
display: block;
//height: 100%;
}
The text on the left panel stays at the top of the div because it has a display attribute of block. Remove this and the text remains centered.
Fixed fiddle.
I faced a problem with css and html. I need to center the text in the box. When I place text, all boxes are going bottom little bit.
Here is my code
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Add vertical-align: top; and text-align: center; to .box like this:
.box {
width: 100px;
height: 100px;
background: #cce;
display: inline-block;
margin-left: 10px;
vertical-align: top;
text-align: center;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
To center the text vertical and horizontal and dont wanna care about the text length you can do it with the table - table-cell method like
.box {
width: 100px;
height: 100px;
background: #cce;
float: left;
margin-left: 10px;
display: table;
}
.box p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
This provides also a great browser support.
To center text in the blocks add text-align: center;
.box {
width: 100px;
height: 100px;
text-align: center;
vertical-align: top;
background: #cce;
display: inline-block;
margin-left: 10px;
}
<div id="3box">
<div class="box">
<p>Title</p>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>