There's a piece of html:-
<div class="field-display">
the text here
<a class="delete">x</a>
</div>
The anchor element is button which has float: right; CSS property. The CSS for the div is:-
.field-display {
height: 25px;
padding: 2px 15px 2px 10px;
vertical-align: middle;
}
But vertical-align: middle; is not working. Any Idea how to align text in middle of the div?
You can add display: table-cell; to your div.
.field-display {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px 15px 2px 10px;
vertical-align: middle;
display: table-cell;
}
Fiddle Demo
Side Note : display: table-cell; is supported by IE8 and above..!
Related
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
If I didn't make parent container be inline-block style
The inner arrow will be aligned in the center position which is I expected.
However, there will be a line-break for the following text.
If I make the parent container be inline-block style
HTML
<div class="queue-view-entry-line" name="Name">
<div class="mycompany-document" style="/* display: inline-block; */">
<div class="arrow-right">
</div>
</div>
<span class="entry-label">File Name</span><span class="entry-value">Planned Payment Dates 2017
</span>
</div>
CSS rules
div{
.mycompany-document{
background: #F7F7F7;
border: 1px solid #AAAAAA;
left: 64px;
top: 64px;
width: 32px;
height: 32px;
vertical-align: middle;
border-radius: 5px;
letter-spacing: 1px;
text-align: center;
display: table-cell;
.arrow-right{
margin: auto;
vertical-align: middle;
display:inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
}
}
I recommend you give flexbox a try. It will quickly be your best friend!
I didn't feel like wrestling with your HTML, so I created a new example to show how you could achieve the desired effect.
Check out this fiddle.
https://jsfiddle.net/omucfbzh/
<div class="box">
<h2>Documents</h2>
<div class="others">
<div class="arrow-container">
<div> > </div>
</div>
<p>Planned Payment Dates 2017</p>
</div>
</div>
.box {
background-color: orange;
display: flex;
flex-direction: column;
padding: 7.5px;
}
.others {
display: flex;
}
.arrow-container {
background-color: grey;
border-radius: 5px;
height: 50px;
width: 50px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
I have used text-align: left; in the css class name-tag but somehow the name is still aligned to the right hand side of the div. Why?
.container {
width:500px;
position:absolute;
display:table;
border: 2px solid red;
}
.img-circle {
background: yellow;
border-radius: 50%;
width: 60px;
height: 60px;
border: 2px solid #666;
font: 32px Arial, sans-serif;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align: left;
border: 1px solid black;
}
<div style="container">
<div class='img-circle'>
AK
</div>
<div class='name-tag'>
Aaron King
</div>
</div>
Sample code can be found here: http://jsfiddle.net/kongakong/6Lrfwt7m/3/
The outcome is this:
In your fiddle you have <div style="container"> instead of <div class="container">
Then you have padding of 75px so its not totally on the left.
It is aligned to the left, you just have large padding to make it seem like it's not. Remove padding-left:75px; and your problem is fixed.
the problem is that there is padding on left and so the cell seems aligned at right.
if you remove the padding you can see that is working correctly.
Check this fiddle:
.name-tag {
display:table-cell;
padding-left:75px;
vertical-align: middle;
text-align:left;
border: 1px solid black;
padding-left:0;
padding-right:30px;
}
http://jsfiddle.net/6Lrfwt7m/8/
Add CSS Box Sizing for width fixed in padding.
.name-tag {
display:table-cell;
padding:10px;
vertical-align: middle;
text-align: left;
border: 1px solid black;
box-sizing:border-box;
}
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
Fiddle
I have problem in my button. I want my button divided into two, 50% each.
For example in my fiddle, I have a blue button having text Use and icon1
Use and icon1 should be 50% each and aligned vertically and horizontally relative to the blue button which I can't do that for some reasons.
Same goes on red button as well.
Solution: Fiddle
<div class='gc_footer_use_nix'>
<div class='gc_footer_nix'>
<div class="gc_footer_button_wrapper">
<div class='gc_footer_nix_txt'>Nix</div>
<div class='gc_footer_nix_icon'>icon2</div>
</div>
</div>
<div class='gc_footer_use'>
<div class="gc_footer_button_wrapper">
<div class='gc_footer_use_txt'>Use</div>
<div class='gc_footer_use_icon'>icon1</div>
</div>
</div>
</div>
CSS:
.gc_footter_use_nix{
text-align: right;
display: table-cell;
vertical-align: middle;
width: 50%;
}
.gc_footer_use{
display: table-cell;
vertical-align: middle;
background-color: #3F6EB6;
padding:5px 30px 5px 30px;
border-radius: 3px;
float: right;
margin-right: 10px;
}
.gc_footer_use_txt{
float: left;
display: table-cell;
vertical-align: middle;
color: white;
font-size: 1.5em;
width: 50%;
margin: auto;
}
.gc_footer_use_icon{
text-align: right;
display: table-cell;
vertical-align: middle;
width: 50%;
margin: auto;
}
.gc_footer_nix{
display: table-cell;
vertical-align: middle;
background-color: #D61920;
padding:5px 30px 5px 30px;
border-radius: 3px;
color: white;
font-size: 1.5em;
float: right;
border: 0px solid green;
}
.gc_footer_nix_txt{
float: left;
display: table-cell;
vertical-align: middle;
position: relative;
border: 0px solid blue;
}
.gc_footer_nix_icon{
float: right;
display: table-cell;
vertical-align: middle;
position: relative;
border: 0px solid yellow;
}
.gc_footer_button_wrapper{
display: table;
width: 100%;
position: relative;
}
Try this fiddle this fiddle.
I changed these rules:
.gc_footer_use {
display: table-cell;
vertical-align: middle;
background-color: #3F6EB6;
border-radius: 3px;
float: right;
margin-right: 10px;
}
.gc_footer_button_wrapper {
display: table;
box-sizing: border-box;
width: 100%;
}
.gc_footer_use_txt {
display: table-cell;
vertical-align: middle;
color: white;
font-size: 1.5em;
padding: 5px 30px 5px 5px;
}
.gc_footer_use_icon{
text-align: right;
display: table-cell;
vertical-align: middle;
padding: 5px 5px 3px 5px;
}
Explanation
I made the gc_footer_button_wrapper class to use the table display and be as wide as its parent container box-sizing: border-box; width: 100%;. Then I made its children to be table-cells that are vertically middle aligned.
I also removed float rules from gc_footer_use_txt and gc_footer_use_icon classes as with my technique it was unnecessary.
Finally, I moved the padding rules to the gc_footer_button_wrapper. These paddings can be customized they you see fit. One might even remove them.
You can use the same technique for the other button.