I'm trying to center align a button in Wordpress using html. I know it's basic, but I'm a total noob.
Below is the code I'm trying to edit. Thanks for your help!
<div class="frm_submit">
[if back_button]
<button type="submit" name="frm_prev_page"
formnovalidate="formnovalidate" class="frm_prev_page [back_hook]>
[back_label]
</button>
[/if back_button]
<button class="frm_button_submit" type="submit" [button_action]>
[button_label]
</button>
[if save_draft]
<a href="#" tabindex="0" class="frm_save_draft" [draft_hook]>
[draft_label]
</a>
[/if save_draft]
</div>
You should be able to center your button by adding the following CSS
.frm_submit {
text-align: center;
}
<button> elements have display: inline-block; on them by default, therefore it's possible to center them by adding the text-align: center; to the container.
Let me know if you need help on how to add the CSS to your website :)
Related
I am trying to align the controls in a line. I've tried different paddings/margins. How can I do this?
<div style="margin-top: 10px">
<button (click)="goToPage(1)" [disabled]="pageNumber==1">
<md-icon>first_page</md-icon>
</button>
<button (click)="previous()" [disabled]="pageNumber==1">
<md-icon>chevron_left</md-icon>
</button>
<input #input type="text" style="width: 30px;height:30px;margin-top:2px" (keyup.enter)="goToPage(input.value)" [(value)]="pageNumber" >
<button (click)="next()" [disabled]="pageNumber==totalPages">
<md-icon>chevron_right</md-icon>
</button>
<button (click)="goToPage(totalPages)" [disabled]="pageNumber==totalPages">
<md-icon>last_page</md-icon>
</button>
<br />
<span>Showing page {{pageNumber}} of {{totalPages}} pages.
</span></div>
You have two problems.
The first one is that your buttons are missing the angular material styling and the second one is that you should learn CSS before jumping to any JavaScript frameworks like Angular. Anyway I made a working demo on Plunker for you.
I just added a few CSS selectors and I used flexbox just like this:
.wrapper{
display: flex;
margin: 1rem;
}
.wrapper button, input {
margin: 0 0.5rem;
}
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)*
}
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
I'm not sure why but there is this small little line connecting these buttons together. Anyone know the css to make it go away?
<div class="button">
<button> Register with <br> facebook </button>
<button> Make a new account </button>
</div> <!--end of div button-->
.button{
text-align:center;
}
Thank you very much :)
It's the default underline from the link. The line you see is actually due to the space between the end of the button and the end of the link tag.
</button> </a>
Change it to:
<div class="button"><button> Register with <br /> facebook </button>
<button> Make a new account </button>
</div>
jsFiddle example
It is caused by the default anchor tag property or text-decoration: underline;.
You can simply add a universal anchor tag style to remove it from all links like so:
a {
text-decoration: none;
}
or only to the ones in .button like so:
.button a {
text-decoration: none;
}
Finally a fiddle: Demo
Try this
<button> Register with <br> facebook </button>
I removed the space between the closing button and anchor tag
http://jsfiddle.net/4GHH4/1/
<div class="button">
<button>Register with <br> facebook</button>
<button>Make a new account</button>
</div> <!--end of div button-->
Your white spaces in your anchor tag were causing your problem. Just remove them and your problem should be solved.