How to make the button text top left in the below case (div2).
I have to use button for some requirement, but make it look like a normal text. Any help you help.
Container is flexbox column and have a button with flex 1.
I don't want add an element inside button and make it position absolute.
Need cleaner way.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
Top left Alignment
Use the property flex-direction: column; to align your text top left.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
flex-direction:column;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
Center Alignment
Just change your style text-align:left to text-align:center.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: center;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
You can do the combination and apply the properties as per your requirements.
This is not perfect and probably you will have to play around with this but i guess this is a step in the right direction.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
position:absolute;
flex-direction: column;
}
So, I added padding-bottom to the .div2 classed element, so the text inside div2 is pushed up and away from the bottom edge of the element.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
padding-bottom: 40%;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</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 have a simple HTML, one parent div, and two children. When I am styling one child with float set to right, the next child goes up and the margin-top doesn't apply to it, which I don't want.
Here is the sample code.
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
float: right;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
Can someone please suggest how to handle this situation?
Here is the JSFiddle
I want the output to be something like
Don't use float. float is deprecated. Please take note of this solution using flex.
.outer {
width: 100%;
height: 100%;
display: flex;
flex-flow: row-reverse;
align-items: center;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2 {
width: 50%;
text-align: center;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
Snippet #2
.outer {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
align-items: flex-end;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2 {
width: 50%;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
Try this code:
.outer{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2{
width: 50%;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
You can use clear: both; in the element what has float: right; property.
I want .board element to have a square aspect ratio. I want to show two of them side by side, together covering the width of their parent.
I don't want to use width: 50%, because I want to position .wrap element with display: flex.
.board {
position: relative;
background: red;
width: 100%;
height: 0;
padding-bottom: 100%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
When I do it like this, I get two divs with squashed width.
Use aspect-ratio and flex:1
.board {
position: relative;
background: red;
flex:1;
aspect-ratio:1/1;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
Alternatively flex:1 and padding-bottom:50%;
.board {
position: relative;
background: red;
flex: 1;
padding-bottom: 50%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></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 :