Button vertical alignemnt inside div - css

I want to align vertically a button inside DIV using bootstrap.
So far the button is inside the div and in the same line but seems to be a bit lower.
Here is the code
<div class="alert alert-info " role="alert" ><div style="display:inline">Hello</div> <div style="float:right; display: inline-block;"><a class="btn btn-info " target="_blank" href="">Preview</a></div></div>
see the screenshot here


http://jsfiddle.net/8qhsbawe/1/
.alert-info span {
height: 34px;
line-height: 34px;
display: inline-block;
}

Related

Aligning div to baseline of the first line of another div?

I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!

You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>

This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle

How can I add spacing between buttons while using btn-group-justified?

I'm using bootstrap's class
<div class="btn-group btn-group-justified">
Buttons are perfect the way they are (I need them equally spaced and taking full length) but I would like a little space between them. I tried playing around with margins, width percentage and padding with no success.
Please see this codepen http://codepen.io/crhistian/pen/WwyWYM?editors=0100

HTML
<div class="panel-footer">
<div class="row">
<div class="col-xs-2">
<div class="row custom-row">
<div class="col-md-6">
<button class="btn btn-info btn-block">Cart</button>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-block">Checkout</button>
</div>
</div>
</div>
</div>
</div>
CSS
.custom-row {
margin-left: -5px;
margin-right: -5px;
}
.custom-row .col-md-6 {
padding-left: 5px;
padding-right: 5px;
}

For the first button in the div tag
.btn-group {
float: left;
width: 45%;
}
And for your other button (add "2" to the other buttons div tag class):
.btn-group2 {
float: right;
width: 45%;
}
Then you can add margins for the same classes if you want to position them better

Semantic Menu - Need to put a centered Title

I need to make my app title centered in the app Semantic menu.
Below is my current code :
HTML:
<div class="ui red inverted borderless top attached menu">
<div class="ui red dropdown icon launch button">
<i class="sidebar icon"></i>
</div>
<a class="item mytitle ">My App Title</a>
<div class="ui right aligned category search item">
User Name
</div>
</div>
CSS :
.mytitle {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 35px;
display: table-cell;
color: #FFFFFF;
text-decoration: none;
}
I tried to add the width="90%" in the CSS, but although it is able to make it centered, it pushed the Username, which I want to avoid.
Is there another way to make it centered?
Here is my current JSFiddle

Like This https://jsfiddle.net/DIRTY_SMITH/85fenw7t/1/
.mytitle {
height: 35px;
color: #FFFFFF;
text-decoration: none;
margin-left: calc(50% - 90px);
}

How to use center-block and vertical align together using Bootstrap?

I have this HTML code:
<div class="col-md-3 center-block">
<div class="icon-circle">
<i class="fa fa-desktop"></i>
</div>
</div>
And this CSS:
.icon-circle {
float: none;
display: table-cell;
vertical-align: middle;
text-align: center;
}
The fa-desktop is aligned vertically and horizontally centered in the icon-circle class. Now I want to align the whole icon-circle within the col-md-3. But since there is display table cell, the display block in the center-block doesn't work. Do you have any idea how could I get it work?

the icon-circle parent need to be in table display mode
.col-md-3 {
display: table;
}

Vertically centering an image and a text

I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!

h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}

You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>

If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Resources