When i don't insert md-button everything works perfectly. But when I add md-button, span doesn't work properly. The number "5" goes down. How can I solve this problem?
HTML:
<button md-button class="special-orders">xüsusi təkliflər <span>5</span></button>
CSS:
.special-orders {
font-size: 15px;
color: white;
span {
font-size: 11px;
display:inline-block;
width: 15px;
height: 15px;
text-align: center;
color: #FF2868;
background-color: white;
border-radius: 50%;
vertical-align: middle;
padding: 0;
}
}
The material styling sets the line-height on the button to 36px which seems to be causing the problem with the span having a fixed height and width. Setting the line height on the span as well is easier than trying to line everything up.
.special-orders {
font-size: 15px;
color: white;
span {
line-height: 18px;
width: 18px;
display:inline-block;
text-align: center;
color: #FF2868;
background-color: white;
border-radius: 50%;
vertical-align: middle;
padding: 0;
}
}
Related
I've been through some CSS practice lately. Let's say I have the following HTML/CSS code of a calendar web app you can see in my Codepen.
What I need is to have the ".day_body" element and the "+" pseudo element along with its white circle container horizontally aligned. Furthermore, I need that "+" to fit in the centre of the white circle. Unfortunately editing the HTML or using flexbox is not an option for now.
Any ideas on how to accomplish that?
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
}
.day_add {
margin-left: 20px;
float: left;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
Like already mentioned in the comment, adding text-align: center; to .day-add helps to align the plus sign.
To horizontally align the the date with the circle, you could increase the line-height of the .day_body to the half of the line-height of the circle (4em): line-height: 2em;. Nevertheless this moves the date a little bit 'down'. Is that fine?
Alternatively you could use absolute positioning of the circle.
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
line-height: 2em;
}
.day_add {
margin-left: 20px;
float: left;
text-align: center;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
I am creating a link that looks like a button. One thing I am running into is if I have more than one word for the anchor the link/button text is going to the next line. It is fine if the anchor text goes to the next line, but the border then does not wrap around the entire thing. It looks as if the border breaks (not sure of the correct terminology).
See the image below for a reference: (Sorry image upload keeps failing)
Does anyone know how I can
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
You just need to set display: block to your .mainLink
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
display: block;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
I have 1 div with two separate sections of text. However, one of these sections of text is smaller than the other, leaving it slightly lower than the other section.
I would like it to be centered both vertically and horizontally within the div - inline with the larger text... margin-bottom is not working, however margin-left and margin-right are... how do I do this? Thankyou.
.portfolioHeader {
position: relative;
font-family: coolfont;
top: 20px;
font-size: 55px;
color: black;
margin-left: 70px;
text-align: left;
}
a.miniheader {
text-decoration: none;
margin-left: 20px;
}
span.smallerish {
font-size: 35px;
color: #3F3F3F;
text-decoration: none;
}
<div class="portfolioHeader"><a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ><a class = "miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a></a>
</div>
This is how I would do it:
Fix invalid html
Put the font sizes on the anchors
Vertical align the anchors
If you want the text horizontally centered, then use text-align center on the div (instead of left with margin)
.portfolioHeader {
position: relative;
font-family: coolfont;
top: 20px;
color: black;
text-align: center;
}
a.header {
font-size: 55px;
vertical-align:middle;
}
a.miniheader {
font-size: 35px;
text-decoration: none;
margin-left: 20px;
vertical-align:middle;
}
span.smallerish {
color: #3F3F3F;
text-decoration: none;
}
<div class="portfolioHeader">
<a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ></a>
<a class="miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a>
</div>
Set vertical property of anchor tag
.portfolioHeader a
{
vertical-align: middle;
}
You need to vertical-align the 'a' tags.
This css should help.
.portfolioHeader {
color: black;
display: table;
font-family: coolfont;
font-size: 55px;
margin-left: 70px;
position: relative;
text-align: left;
top: 20px;
vertical-align: middle;
}
a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
a.miniheader {
left: 30px;
position: relative;
text-decoration: none;
top: -5px;
}
span.smallerish {
color: #3f3f3f;
font-size: 35px;
text-decoration: none;
}
I have a button on my website, and I used resolution independent alignment. I checked two different computer screens with different resolutions and it looks alright, however, once opened on a larger aspect ratio screen or a mobile/tablet device it re-positions. On a larger aspect ratio screen the buttons moves to the left, on the smaller devices, it floats towards the right. I'm not 100% certain what could of gone wrong. Below is my CSS and HTML code.
HTML:
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<button>Book Appointment</button>
</div>
CSS:
body {
background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
margin: 0;
padding: 0;
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-left: 33%;
margin-top: 3%;
border-radius: 5px;
}
Any idea how to fix this?
You center a html element, which has the standard position and is a block element with margin-left: auto and margin-right: auto.
It is a convention to write the first letter of classes and ids in lowercase.
Example
Just another way to do it:
I wrap your button in div and center the button using text-align:center
Don't forget to take out margin-left: 33%; in your css
HTML
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<div class="center">
<button>Book Appointment</button>
</div>
</div>
CSS
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.center {
text-align: center;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-top: 3%;
border-radius: 5px;
}
Example: http://codepen.io/anon/pen/EPyjXm
create a new CSS property for a tag and set display to flex(takes up 100% of width; and justify content to center.
EDIT
After checking out your site,
there is a margin-left of 15px coming from somewhere. Get rid of it if that is a possibility or else just add margin-left: 0 to the .Welcome a {...}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
margin-left: 0; /* Add !important in case it is overwritten*/
}
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
border-radius: 5px;
}
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<a href="website_link">
<button>Book Appointment</button>
</a>
</div>
as you can see on this JSFiddle and on picture below, I'm struggling to get the signature placed as I want in my banner (I want it at the bottom right of the blue banner without interfering with the quote text alignment). The issue that I have is that with my current code the second line of the text is not perfectly aligned horizontally to the middle of the block (there's more space to the right than to the left).
How could I fix this and have full control on the signature position?
Many thanks,
HTML:
<div class="block blueback center">
<h2 class="white">dfjdsjdklj dsjfdslfjldsjf ldsjfdlsjflkdsfjdlskjf dljfdslfjkldsj dljfsdljfdklsj lkdjflkdsjdlks dsfjsdlkfjkls dsjflkdsfjdkl</h2><p class="signature">John Dupont</p>
</div>
CSS:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
}
.white { color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
display: inline;
}
.center {
vertical-align: middle;
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
.signature {
display: inline;
margin-top: 20px;
margin-bottom: 0px;
padding-top: 0px;
font-size: 12px;
color: #fff;
float: right;
font-weight: 700;
}
.blueback {
background: #0064C4;
}
They're interfering with each other because they're both set to be inline display. Floating the signature to the right starts on the same line as the quote. Thus the float ends up reducing the amount of width the quote perceives that it has, and a visually off-center center is the result.
I am not sure why inline is necessary. You could leave them both as block display and then align the quote's text to the right.
CSS:
.white {
color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
padding: 0;
margin: 0;
}
.signature {
font-size: 12px;
color: #fff;
text-align: right;
font-weight: 700;
padding: 0;
margin: 0;
}
JSFiddle adjustment
If you compare it with yours, it looks visually the same (except the quote text is now centered).
You can use negative margins:
.signature{
margin-right: -20px;
}
But I would move the padding from the outer div to be margins of inner h2 and used margin-left on class signature:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
margin-left: 20px;
margin-right: 20px;
}
.signature{
margin-left: <put here>
}
You also need to define float: left; for your white class as you have defined float: right; for your .signature and other things you can manage such as margins and paddings.
demo