I can't figure out what I have wrong with my css. I would think this would vertically center the text inside this div:
.content-bar {
height: 60px;
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
}
.content-bar-content {
display: flex;
align-items: center;
}
<div class="content-bar">
<div class="content-bar-content">
Testing 123
</div>
</div>
However, the text is lining up to the top of the div. What am I missing?
See codepen: https://codepen.io/anon/pen/xgOwwp
You can specify the content-bar as a flexbox like below:
.content-bar {
height: 60px;
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
display: flex;
align-items: center;
}
.content-bar-content {}
<div class="content-bar">
<div class="content-bar-content">
Testing 123
</div>
</div>
Or you can inherit the height of the content-bar - just add height: inherit on content-bar-content - see demo below:
.content-bar {
height: 60px;
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
}
.content-bar-content {
display: flex;
align-items: center;
height: inherit;
}
<div class="content-bar">
<div class="content-bar-content">
Testing 123
</div>
</div>
check with the demo , i have swap the height
.content-bar {
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
}
.content-bar-content {
display:flex;
align-items:center;
height: 60px;
}
<div class="content-bar">
<div class="content-bar-content">
Testing 123
</div>
</div>
All of your CSS must be declared in your parent container. Here is an example to center both horizontally and vertically:
.content-bar {
height: 80px;
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
display:flex;
align-items:center;
justify-content: center;
}
<div class="content-bar">
<div class="content-bar-content">
Testing 123
</div>
</div>
Hope this helps!
Add height to both classes and addvertical-align: middle to content
.content-bar {
height: 60px;
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
height:100%
}
.content-bar-content {
height:100%;
display:flex;
align-items:center;
vertical-align: middle;
}
<div class="content-bar">
<div class="content-bar-content">
Testing 123
</div>
</div>
Try this simple code to align text in center of the div remove fixed height and give padding
.content-bar {
padding:30px;
height:auto;
background: #f7f7f7;
overflow: hidden;
border-bottom: 1px solid #ececec;
}
.content-bar-content {
display:flex;
text-align:center;
}
<div class="content-bar">
<div class="content-bar-content">
Testing 123<br/> Testing 123<br/> Testing 123<br/> Testing 123<br/>
</div>
</div>
Related
I would like the button to be positioned at the bottom right of the red colored div. I used padding-bottom and margin-bottom properties but that does not seem to work. Could anyone please help?
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
.button {
float: right;
position:relative;
transform:translate(-5px,-25px); //x and y controls
}
I have just answered the same thing to other question. ... Use position:relative. I see the point why people refrain from using it. But really ain't no shame. Especially when there isn't a parent-child relation between the elements.
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
position:relative;
top: -22px;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
An alternative to the other answers using display: grid instead. This is easier for the browser than using position absolute or float!!
/* ignore */ body { margin: 0 } * { box-sizing: border-box } /* ignore */
.container {
display: grid;
width: 50vw;
height: 100vh;
border: 1px solid blue;
padding: 8px;
}
.box, .button { grid-area: 1/1/-1/-1 }
.box { border: 1px solid red }
.button { margin: auto 0 0 auto }
<div class="container">
<div class="box">
</div>
<div class="button">
<button>Click</button>
</div>
</div>
I made a simple example to test this out. I have one wrapper div with two other div elements inside it set to display: inline-block;. The two inner div elements fall on the same line, but how do I get them centered on the half of the main div they belong to? For example, the blue box in the middle of the left side of the main div and the red box in the middle of the right side of the main div. Code and screenshot below.
Also, the inspector shows a width of 204px for the main-box div and even when I set padding and margin to 0 there's still a gap on the bottom between the blue/red boxes and the border of the main-box. How do I get rid of the gap?
.box-test {
height: 200px;
display: inline-block;
width: 30%;
box-sizing: border-box;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#main-box {
text-align: center;
border: 1px solid black;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
Use flexbox and margin:auto on both elements and they will get centred like you want and you will also get rid of all the whitespace issues:
.box-test {
height: 200px;
margin:auto;
width: 30%;
box-sizing: border-box;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#main-box {
border: 1px solid black;
display:flex;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
What you should use is a flexbox for the wrapper. When defining space-around for the 'horizontal alignment' you will get what you want.
For more details on flexbox see here
* {
box-sizing: border-box;
}
#main-box {
border: 1px solid black;
display: flex;
justify-content: space-around;
}
.box-test {
height: 200px;
width: 30%;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
You can use flexbox with property justify-content: space-around on the wrapper.
.box-test {
height: 200px;
width: 30%;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#main-box {
display: flex;
justify-content: space-around;
border: 1px solid black;
}
<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>
#main-box {
text-align: center;
border: 1px solid black;
font-size:0;
}
Why it is so?
Please read this:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Removing whitespace between HTML elements when using line breaks
https://jsfiddle.net/evzckd3w/
How to vertical-align without using display table/table-cell or position absolute ?
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
Here is an another option using "Flex" property.
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
#parent {
border: 1px solid red;
display: flex;
align-items: center;
height: 100vh;
}
.child {
border: 1px solid blue;
flex-grow: 1;
}
Codepen demo link
You can use position relative, with top of 50% and a translation of -50%.
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
position: relative;
top: 50%;
transform: translate(0,-50%);
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
Another method could be to use a floater div
#parent {
border: 1px solid red;
height: 100vh;
}
.floater {
float:left;
height:50%;
width:100%;
margin-bottom: -25px;
}
.child {
border: 1px solid blue;
clear: both;
height:50px;
}
<div id="parent">
<div class="floater"></div>
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
You can try using display:flex.
CSS
#parent {
border: 1px solid red;
height: 100vh;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
You can use display:flex;:
#parent {
border: 1px solid red;
height: 100vh;
display:flex;
align-items:center;
justify-content:center;
}
You can use like that I think
position: fixed; top: 50%;
if you do not mind browser compatibility I would go with flex - see #rblarsen, #Satheesh Kumars answers.
but if you need to expand browser support, here is a more complex but rather solid solution : tested IE9+ FF Chrome and other major browsers...
check out this fiddle : https://jsfiddle.net/kLLz0nm2/
HTML
<div class="wrapper">
<div class="content">Middle aligned</div>
<div class="middle"></div>
</div>
CSS
.wrapper{
width : 100%;
height : 100%;
text-align: center;
}
.content{
display: inline-block;
vertical-align: middle;
}
.middle{
height: 100%;
display: inline-block;
vertical-align: middle;
}
P.S - the above translate solution while fairly simple can sometimes cause poor rendering issues, check out :
I'm facing a css problem realted to inline-div.
When the text(or sentece) is long, the inline div pushes down as on the image below:
But, when I add a line break, It works perfectly.
How can I make it work without having to use <br>? The main content to be posted is dynamic and it also needs to be responsive.
Thanks
Please Note: This is a simplified version of my actual code. In the
actual code the width of the main container is 100%
HTML
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
CSS
body{
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv{
border: 10px solid brown;
display:inline-block;
width: 70px;
overflow:hidden;
vertical-align:top;
}
#secondDiv{
border: 10px solid skyblue;
float:left;
width: 70px;
}
#thirdDiv{
display:inline-block;
border: 5px solid yellowgreen;
vertical-align:top;
}
use : white-space: nowrap; for the div containing the long sentences.
You can use flexbox. Just add
#container {
display: flex;
}
body {
width: 350px;
margin: 0px auto;
}
#container {
display: flex;
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
vertical-align: top;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
vertical-align: top;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
I have a parent div with variable width and height and overflow auto, then I have two or more children div with 100% with of parent.
I would like that all the children div have the same width, but when the parent has horizontal scroll, each children have different width.
See the example:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
height: 20px;
background: aqua;
display: inline-block;
white-space: nowrap;
border: 1px solid yellow;
width: 100%;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
Try this
#container {
width: 175px;
background: red;
overflow: auto;
border-collapse:collapse;
}
.table {
width:100%;
display:table;
}
.block {
height: 20px;
background: aqua;
display: table-row;
white-space: nowrap;
border: 1px solid yellow;
}
<div id="container">
<div class="table">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>
</div>
Please note that I changed display to table-row which automatically removes the border, but in order to preserve it I added border-collapse:collapse; to #container.
Edit: Added a div with a class "table" + relevant CSS
The solution is:
#container {
width: 175px;
background: red;
overflow: auto;
}
.block {
background: none repeat scroll 0 0 aqua;
border: 1px solid yellow;
float: left;
height: 50px;
padding: 10px;
width: 175px;
word-break: break-all;
}
<div id="container">
<div class="block">aaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="block">bbb</div>
<div class="block">ccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="block">ssss</div>
</div>