I am trying to put a vertical rule between two buttons in html.
It should separate the buttons, but instead it is moving the button down.
This
Turns into this:
<button type="button" class="btn btn-default" >button</button>
<button type="button" class="btn btn-default" style="margin-right: 100px">button </button>
<button type="button" class="btn btn-primary" >separate button</button>
for the horizontal rule: <hr width="1" size="500">
Here is the fiddle:
http://jsfiddle.net/37topjh1/
By default, horizontal rules are block elements, so you will need to set the display property of the hr to inline-block. You'll probably also want everything to be aligned nicely in which case you will also need to set the vertical-align property of all the elements to middle.
button,hr{
vertical-align:middle;
}
button:nth-of-type(2){margin-right:100px;}
hr{
background:#000;
border:0;
color:#000;
display:inline-block;
height:40px;
width:1px;
}
<button>button</button>
<button>button</button>
<hr>
<button>separate button</button>
Change display to inline-block:
hr {
display: inline-block;
}
You should use inline: block;
hr {
display: inline-block;
}
Related
I want to adjust labels text gap automatically between labels.
"Labels" are under the "Buttons".
Here is the code:
<style>
.btn{
margin-right: 5px;
display: inline-block;
text-align: center;
position:relative;
}
.btn label {
display: block;
position:relative;
}
</style>
<!-- Html Part - All show horizontically -->
<button class="btn">Medicine 1</button>
<button class="btn">Medicine 2</button>
<button class="btn">Medicine 3</button>
<button class="btn">Medicine 4</button>
<br>
<!-- here I want to adjust position button relative -->
<!-- I want position/gap of labels adjust automatically under the buttons -->
<!-- Labels under the buttons looks good and aligned-->
<label class="btn">2 mg</label>
<label class="btn">500 mg</label>
<label class="btn">650 mg</label>
<label class="btn">250 mg</label>
https://jsfiddle.net/
Any idea or suggestions would be welcome.
Add a margin-bottom: 15px to the .btn label css that you have in your code. Keep the rest of the code too because label is in fact an inline-element so you have to override it to display: block so that it acts like a block element and only then would the margin work on it.
I have a button and some text next to it. I'd like to match the text's vertical alignment with the button's. Here's what I have now:
Basically, I'd like the or Sign Up text to go a bit higher. I'm using MaterializeCSS as well. Here's the code I have for this:
HTML
<div class="center">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
CSS
.alternate-option {
margin-left: 20px;
}
I have tried using padding-bottom as well as margin-bottom.
This is caused by MaterializeCSS's button style :
margin-bottom: 15px;
An alternate solution to Mousa Dirksz's span repositionning would be to
remove the button's default margin :
HTML
<div class="center">
<div class="alternate-option">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span>or Sign Up</span>
</div>
</div>
CSS
.alternate-option button {
margin-bottom: 0px;
}
.alternate-option span {
margin-left: 20px;
}
Try to use:
.alternate-option {
margin-left: 20px;
vertical-align: baseline;
position: relative;
top:-5px;
}
Also look at: http://www.w3schools.com/cssref/pr_class_position.asp
For anyone looking to center a button and a link it's possible to use the following snippet:
<div class="valign-wrapper">
<button class="btn waves-effect waves-green green darken-1">Sign In</button>
<span class="alternate-option">or Sign Up</span>
</div>
.alternate-option {
margin-left: 10px;
}
It's important to note that using Materialize valign-wrapper class will vertically align children elements but it will remove the spacing between them that's why we need to add a margin-left on the span children.
Without knowing the full CSS, I suspect that you need to vertically align the button and span..such as:
button, span {
vertical-align: middle;
}
Try this suggestion
Use absolute positioning
CSS:
.alternate-option {
position:absolute;
left:numeric value*(adjust according screen size)*
top:numeric value*(adjust according screen size)*
}
Excuse this basic question, but I couldn't find an answer that fit. I have this code in a view:
<div>
<h4> Irrelevant MVC code... </h4>
<button type="button" class="btn btn-success">Accept</button>
<button type="button" class="btn btn-warning">Deny</button>
</div>
I would like the 2 buttons to appear next to the heading, not below. How would I do this please?
Just add css property display: inline-block; to yours elements.
It's a method to display an element as a block while flowing it.
By default, your buttons are already inline, so you just need to display your h4 inline :
h4{
display: inline-block;
}
Try this :-
Because it is a block element, so your buttons come down.
h4{
display:inline-block;
}
I am using Bootstrap 3. Here is my HTML page:
As you can see the star is downside to the title. I want to align with title
Here is my html code:
<p class="pull-right visible-xs">
<h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500
<button type="button" class="btn bookmark" id="1799" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</center>
</h3>
</p>
and css:
button.bookmark {
border:none;
background: none;
padding: 0;
}
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
My answer to your previous question only works when the icon is adjacent to a .btn.
The idea being that the two align perfectly as if they were two .btns.
In this case you don't need the .btn class, you can just set the vertical align on the button.
<button type="button" class="bookmark" id="1799">
button.bookmark {
border:none;
background: none;
padding: 0;
vertical-align: middle;
}
Demo
I believe the line-height in your css that's causing it. It is inheriting the attribute and it might be smaller causing it to have too much space above it. If you have a link I can check it in firebug. If not try messing with that. You can also find some cool info about it Here
Hopefully that helps, Let me know if that does it
I am using Bootstrap 3 in my project.
Here is my html page:
As you can notice, the star is not aligned in line with the view details button below.
Here is my html code
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small></p>
<p>
<a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a>
<button type="button" class="bookmark" id="1799" ><span class="
glyphicon glyphicon-star-empty "></span></button>
</p>
</div><!--/span-->
css file:
button.bookmark {
border:none;
background: none;
padding: 0;
}
The problem is, that the span with the star icon is already an inline-block with different height and line-height. The button which surrounds the span is also an inline-block element, that's why it is a bit complicated.
Another fix would be, to remove the span inside the button and add the classes from the star-icon to the button like this:
<button class="glyphicon glyphicon-star-empty bookmark">
Now you have the same styling for both buttons and they align correctly when you add
vertical-align: middle; to the star button.
http://jsfiddle.net/a29hC/
There's a number of ways this can be achieved. I'd use one of the following:
Option 1 - relative position with top
button.bookmark {
border:none;
background: none;
padding: 0;
position: relative;
top: 2px;
}
Demo
Option 2 - give the button a .btn class so it has same layout styles as the .btn next to it, then remove left and right padding
<button type="button" class="btn bookmark" id="1799" >
button.bookmark {
border:none;
background: none;
padding-left: 0;
padding-right: 0;
}
EDIT: Note that the gylphicon gets given a line-height of 1 by Bootstrap. With this technique we don't want that because we want it to match the .btn. So that can be overridden:
.btn.bookmark .glyphicon {
line-height: inherit;
vertical-align: middle;
}
Demo
Try putting the two images in a div and using the vertical-align property.
Example:
<div class="col-6 col-sm-6 col-lg-4">
<h3>2000 Cadillac Eldorado Esc (Prospect heights) $3500 </h3>
<p><small>clean eldorado only 123000 miles fresh tune up needs nothing adult driven extremely reliable and well taken care of for ... </small>
</p>
<div> <a class="btn btn-default" href="/search/1799/detail/" role="button">View details »</a> <button type="button" class="bookmark" id="1799"><span class="glyphicon glyphicon-star-empty" style="vertical-align: middle;"></span>
</button>
</div>
</div>
why not just put the star inside the button and let Bootstrap align it for you? You can also add the btn class to the <a> tag to style it as a button. Less code :)
<a class="btn btn-default" href="/search/1799/detail/" class="bookmark" id="1799">
View details <span class="glyphicon glyphicon-star-empty"></span>
</a>
Edit: the reason I made this suggestion is a personal preference; I prefer to let Bootstrap do its thing and not add too much additional CSS positioning as it might get in the way when resizing the browser, etc.
Bootstrap may have some special class for this... however it might rely on a set of circumstances. I think you'd be better off thinking of this as a CSS positioning question.
You want to align 2 elements to one another, vertically. elements which are display: inline or inline-block can align with vertical-align. You can read about that HERE.
In your case, you will want the two elements to be display: inline-block so that you can give them shape and position like a block element, and still have access to some of the properties an inline element would have. Once they are both display: inline-block you can align them with vertical-align: middle;. 2 things to keep in mind are that you don't want them floated, and that when we say they are aligned, it is to each other and not to the box they reside in.
HTML
View Details >>
<button class="star">★</button>
CSS
a { /* reset a */
text-decoration: none;
color: inherit;
}
.button {
display: inline-block;
padding: .5em;
border: 1px solid black;
border-radius: 5px;
vertical-align: middle;
}
.star {
background: transparent;
border: 0;
display: inline-block;
vertical-align: middle;
}
Here is a jsFiddle