Im trying to center this button but can't seem to get it to work, any help is much appreciated.
<div class="cta-btn">
<a class="btn btn-cta text-center" href="#" role="button">EXPLORE</a>
</div>
And the CSS
.btn-cta{
padding: 25px 80px;
border: 3px solid white;
background-color: transparent;
color: white;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 1.4em;
transition: all 0.3s ease;
}
Put the .text-center class on the enclosing div
<div class="cta-btn text-center">
<a class="btn btn-cta" href="#" role="button">EXPLORE</a>
</div>
Also, if you want the button to fill the width of the div, add the .btn-block class to the button.
use class text-center
<div class="cta-btn text-center">
<a class="btn btn-cta text-center" href="#" role="button">EXPLORE</a>
</div>
Did you try adding text-align: center;
display: block;
margin: 0 auto;
Related
.ProfileSubHeadTitleLinkStyle-181 {
display: flex;
margin-top: 36px;
margin-right: 20px;
margin-bottom: 24px;
justify-content: space-between;
}
.ProfileSubHeadTitleStyle-182 {
font-size: 18px;
font-weight: 600;
margin: 0px 20px 0px 0px;
padding: 0px;
}
.ProfileEditLinkStyle-283 {
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: inherit;
font-weight: inherit;
color: rgb(92, 27, 134);
outline: none;
text-decoration: none;
background: none transparent;
border-top: none;
border-right: none;
border-left: none;
border-image: initial;
cursor: pointer;
display: flex;
margin: 0px 10px;
overflow: inherit;
padding: 0px;
text-align: left;
text-overflow: inherit;
border-bottom: 1px solid transparent;
align-items: center;
user-select: text;
}
.profileNameColStyle-282 {
margin: 20px 0px;
display: flex;
flex-flow: row wrap;
}
.flex1-185 {
margin-right: 30px;
margin-bottom: 15px;
}
<div id="profileNameWrapper">
<div>
<div class="ProfileSubHeadTitleLinkStyle-181">
<h3 class="ProfileSubHeadTitleStyle-182">Name</h3>
<button type="button" data-testid="edit-link-test-id" class="ms-Link ProfileEditLinkStyle-283">
<i data-icon-name="Edit" aria-hidden="true" class="root-286"></i>
Edit
</button>
</div>
<div>
<div class="profileNameColStyle-282" aria-hidden="true">
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">First name</div>
<div class="ProfileContentStyle-179">Sarfraj</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184" data-testid="middle-name-test-id">Middle name</div>
<div class="ProfileContentStyle-179">L</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">Last name</div>
<div class="ProfileContentStyle-179">P</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">Preferred first name</div>
<div class="ProfileContentStyle-179">P</div>
</div>
</div>
</div>
</div>
</div>
In browse mode, nvda and jaws should read each section after reading the name and edit button, but it's reading the whole container after the edit button. It should read each section one by one.
What would be the way to do that? Also, any documentation on why in browse mode, the focus goes to some items and sometimes it goes directly to their child elements?
You didn't mention how you're navigating but I will assume you're using the up/down arrow keys to walk the DOM.
And what do you mean by "section"? You don't have a literal <section> element and you don't have anything with role="region" (which is the default role for a <section> if that section has an aria-label, which yours doesn't).
I did notice that you have aria-hidden="true" on your <div> for the lower "section" and that will completely hide all child elements in that <div>.
<div class="profileNameColStyle-282" aria-hidden="true">
Come to a strange problem, when I use css to set the button, I can set its color, font-size, background, but cannot set its border. The following is HTML and CSS code.
.btn-general {
border-width: 2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white {
border-color: #fff;
color: #fff;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Put your css in Style Tag
<style>
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
border-color: #fff;
color: #fff;
}
</style>
always put CSS on the top of html
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
You have set your border-color to white that's why you could not see that. I have changed it to darker color so that you can see it.
.btn-general{
border-width:2px !important;
border-style: solid !important;
border-color: #ff3333;
border-radius: 0;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase !important;
}
.btn-white{
color: #222;
border-color: #222;
}
<section id="home">
<div id="home-cover">
<div id="home-content-box">
<div id="home-content-box-inner">
<div id="home-heading">
<h3>Watch Out<br>The Modern Responsive Website!</h3>
</div>
<div id="home-btn">
<a type="button" class="btn btn-lg btn-general btn-white" href="#work" title="View Our Work">View Our Work</a>
</div>
</div>
</div>
</div>
</section>
Hope this helps
<div class="col-md-offset-4 col-md-6">
<div style="margin-top: 50%">
<md-input-container class="col-md-10">
<label>
Username
</label>
<input type="text" ng-model="user.userName">
</md-input-container>
</div>
<br>
<div>
<md-input-container class="col-md-10">
<label>
Password
</label>
<input ng-model="user.userPassword">
</md-input-container>
</div>
<br>
<div class="col-md-10">
<a style="color: #2e98d6; border: 1px solid #2e98d6; text-transform: none; cursor: pointer;
min-height: 36px; min-width: 150px; font-weight: 500; font-size: 14px; border-radius: 37px;
padding: 0 20px;" class="md-button md-primary primary-btn pull-right" ng-click="doLogin()">Login</a>
</div>
</div>
I am trying to apply custom css class to my angular material but it is not working but if I using inline style then I can.
This works! So some of the styles were getting overridden by angular-material class, the simplest fix for this will be to add !important to the CSS properties that are getting overridden!
How to check what is getting overridden?
Open the console, select the element that you want to check, click the element and check for the CSS class you added, if any of the properties of that particular class have a strikethrough on them, then you add !important on that particular property!
Note: Since the stylesheets were not provided, I worked with the classes added by angular-material by default. Also Please ignore the Javascript part in the fiddle.
JSFiddle Demo
CSS:
.button-customize{
color: #2e98d6 !important;
border: 1px solid #2e98d6;
text-transform: none;
cursor: pointer;
min-height: 36px;
min-width: 150px;
font-weight: 500;
font-size: 14px;
border-radius: 37px !important;
padding: 0 20px;
}
As you can see by the image. The icon sits high. Any margin or padding I seem to try moves the text box down with it. With it positioned extra high, it also pushed the search text up. Any suggestions on how to fix?
I just want the search icon to be the same height and even with the search box and not mess with the label text.
.icon-btn {
padding: 0;
margin: 0;
display: inline-block;
height: 26px;
}
.icon-magnifier-dark:before {
background-color: white;
border: solid;
content: "\e035";
color: #color-light;
font-family: outlinedFont;
font-style: normal !important;
font-size: 20px;
line-height: 1;
box-sizing: border-box;
}
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
I think some other CSS might be overriding or changing the aligning, so you should check your full CSS once. I checked your JSFiddle which you provided in comment on one of the answer, I saw the aligning was OK in the Fiddle.
change font-size
font-family: outlinedFont;
font-style: normal !important;
font-size: 15px;
line-height: 1;
box-sizing: border-box;
}
You made it so difficult. Please Check this code below...
HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
Css:
.icon-btn {
display: inline-block;
width: 26px;
height: 26px;
background-color: red;
text-align: center;
padding:5px;
padding: 3px;
box-sizing: border-box;
}
.icon-magnifier-dark:before {
content: "\e035";
font-family: outlinedFont;
font-style: normal;
}
input[type="text"]{
width:150px;
height:26px;
vertical-align:top;
box-sizing: border-box;
margin-right: -5px;
}
Check the demo on jsfiddle
This is the code implementation
http://codepen.io/anon/pen/emjLMJ
I dont understand why:
the hyperlinks are not aligned with the bar title
The dropdown button (black background) is outside of the main quickbar div
overflow only hides the parts overflowing but doesnt force it inside the main wrapping div.
HTML code
<div id='quick_bar' >
<div id='bar_title'>
<span>Check:</span>
</div>
<div id='left_bar' class='qbar'>
<a href="#" id='show_courts' class ='short_filter'>One</a>
<a href="#" id='show_clubs' class ='short_filter'>Two</a>
<a href="#" id='show_courts' class ='short_filter'>Three</a>
<a href="#" id='show_courts' class ='short_filter'>Four</a>
</div>
<div id='right_bar'>
<a href="#" id='hideSearchBtn'class='list-group-item'>
<span id='DownGly' class ='glyphicon glyphicon-chevron-down'>
</span>
<span id='UpGly' class ='glyphicon glyphicon-chevron-up' style="visibility: hidden;">
</span>
</a>
</div>
</div>
CSS Code
#quick_bar {
width:320px;
background-color: white;
height: 18px;
border-radius: 3px;
margin-top: 2px;
border: 1px solid;
border-color: #dbdbdb;
}
#left_bar a{
margin-left: 4px;
margin-right: 3px;
font-size: 11px;
height: 18px;
font-style: Arial;
font-weight: bold;
}
#bar_title {
float: left;
font-size: 11px;
font-style: Arial;
font-weight: bold;
margin-left: 4px;
}
#right_bar a {
color: black;
}
#right_bar {
height: 18px;
width: 10%;
float: right;
background-color: black;
}
I made a few changes to your codepen; http://codepen.io/anon/pen/VYBGqX
To start with I took your span out of its own separate div, and removed the height from bar_title, which fixed your vertical alignment issues.
<div id='left_bar' class='qbar'>
<span id='bar_title'>Check:</span>
<a href="#" id='show_courts' class ='short_filter'>One</a>
<a href="#" id='show_clubs' class ='short_filter'>Two</a>
<a href="#" id='show_courts' class ='short_filter'>Three</a>
<a href="#" id='show_courts' class ='short_filter'>Four</a>
</div>
I then added an extra style to float the left_bar to the left
#left_bar {
float: left;
}
I found that this fixed the black box issues.
Not sure what you mean about the wrapping/overflow issues.
if u add vertical-align: top; to #left_bar a the align problem will be gone.
when you float something, its gonna stand in its original height. and as the #left_bar is there filling the whole row, #right_bar falls down. to fix it you should put #right_bar div before #left_bar like this
<div id='quick_bar' >
<div id='bar_title'>
<span>Check:</span>
</div>
<div id='right_bar'>
<a href="#" id='hideSearchBtn'class='list-group-item'>
<span id='DownGly' class ='glyphicon glyphicon-chevron-down'>
</span>
<span id='UpGly' class ='glyphicon glyphicon-chevron-up' style="visibility: hidden;">
</span>
</a>
</div>
<div id='left_bar' class='qbar'>
<a href="#" id='show_courts' class ='short_filter'>One</a>
<a href="#" id='show_clubs' class ='short_filter'>Two</a>
<a href="#" id='show_courts' class ='short_filter'>Three</a>
<a href="#" id='show_courts' class ='short_filter'>Four</a>
</div>
</div>
CSS:
#quick_bar {
width:320px;
background-color: white;
height: 18px;
border-radius: 3px;
margin-top: 2px;
border: 1px solid;
border-color: #dbdbdb;
}
#left_bar a{
margin-left: 4px;
margin-right: 3px;
font-size: 11px;
height: 18px;
font-style: Arial;
font-weight: bold;
vertical-align: top;
}
#bar_title {
float: left;
font-size: 11px;
font-style: Arial;
font-weight: bold;
margin-left: 4px;
}
#right_bar a {
color: black;
}
#right_bar {
height: 18px;
width: 10%;
float: right;
background-color: black;
}
The browser is adding default styles to your anchor tag. Try changing the display type for your links to display:block; or you can float your links left and add padding/margin to separate them. You can also add line-height: 17px; to your span. That should do the trick as well.