I want to create a button circle link with text inside it but I have problem centering the text inside the circle button. The line height is too large. Any suggestion to this problem?
Here's the code: https://jsfiddle.net/hma443rL/
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: inline-block;
font-size: 35px;
line-height: 2.3;
vertical-align:middle;
color: white;
font-weight: bold;
text-decoration: none
}
<a href="" class="btn btn-donate">
Donate <span>Us</span>
</a>
I'm trying to create a button like this
Flexbox can do that:
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 149px;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 35px;
color: white;
font-weight: bold;
text-decoration: none
}
Donate <span>Here</span>
Use inline-blocks to line them up vertically instead of using line-height like here.
I have moved the full text inside the span in the markup
snippet below:
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: inline-block;
font-size: 35px;
vertical-align: middle;
color: white;
font-weight: bold;
text-decoration: none
}
a.btn.btn-donate span {
display: inline-block;
vertical-align: middle;
}
a.btn.btn-donate:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
<span>Donate Us</span>
If you add another element to your markup you can centre using a combination of relative positions and transform
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: inline-block;
font-size: 35px;
vertical-align: middle;
color: white;
font-weight: bold;
text-decoration: none
}
.wrapper {
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<a href="" class="btn btn-donate">
<span class="wrapper">Donate <span>Us</span></span>
</a>
I'm usually partial to using table display properties, but I believe it would suit your requirements here just fine. It requires very minimal adjustments to style and markup.
.btn-donate span {
vertical-align: middle;
display: table-cell;
}
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: table;
font-size: 35px;
vertical-align: middle;
color: white;
font-weight: bold;
text-decoration: none;
}
<span>Donate Us</span>
Related
.slide{
display: block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<a class="slide"><</a>
<a class="slide">></a>
Please help me How can I add both buttons in the same row with the center align? Right now button 1 is on top and button 2 is in the footer. How can I resolve this issue?
I advise you to use flexbox, it's a very good tool to align items and make responsive web pages. You can find guides here or here, that are very clear and will give you the good practices.
.container{
display:flex;
justify-content:center;
}
.slide{
display: block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin-left: 5px;
margin-right: 5px;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<div class="container">
<a class="slide"><</a>
<a class="slide">></a>
</div>
div.arrow {
text-align: center;
}
.slide {
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<div class="arrow">
<a class="slide"><</a>
<a class="slide">></a>
</div>
Changes in class Slide:
display: inline-block;
line-height: 30px;
padding: 0px 0px;
The elements are not in a row as they are block elements. For your requirement they'll have to be converted to inline-block types.
You should use flexboxes:
section#slider_buttons {
display: flex;
display: -webkit-flex;
justify-content: center;
}
section.button {
display: inline-flex;
display: -webkit-inline-flex;
height: 32px;
width: 32px;
cursor: pointer;
border-radius: 50%;
background-color: #2874f0;
color: white;
}
section.button a {
display: block;
text-align: center;
margin: auto; /* Important */
}
<section id="slider_buttons">
<section class="button">
<a><</a>
</section>
<section class="button">
<a>></a>
</section>
<section>
You have two options.
1) Add BootStrap or a similar framework and wrap the two links in a div with a row class.
2) Change your CSS display setting to inline-block
.slide{
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
Flex is the best tool to achieve this. Despite their are solutions with display block. Flex just allows you to controle it in more detail:
.slide-buttons {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
/* Clarity marker, removed when you understand the example */
background-color: rgba(0,0,0,.1);
}
.slide-buttons > a {
display: inherit;
align-items: center;
align-content: center;
justify-content: space-around;
height: 32px;
width: 32px;
margin-right: 5px;
cursor: pointer;
font-size: 16px;
line-height: 1;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
}
.slide-buttons > a:last-child {
margin-right: 0;
}
#bt-slide-left:after {
content: '\276E'; /* \003C */
}
#bt-slide-right:after {
content: '\276F'; /* \003E */
}
<div class="slide-buttons">
<a id="bt-slide-left"></a>
<a id="bt-slide-right"></a>
</div>
<br>
<!-- or -->
<div class="slide-buttons">
<a><</a>
<a>></a>
</div>
I am trying to get two things to line up for HTML. Instead, I get them on top of each other. What I really want is to have them next to each other like websites do (where at the top you can choose between like 6 things and they take you to different parts of the website).
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#home:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#Alt:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>
As another stated, you can use display: inline-block to get horizontal alignment of block elements.
I also added vertical-align: center to maintain a centered position when hovered, since the size changes. You can change center to top or another value if needed.
I also removed redundant CSS rules, shrinking your CSS down to around half its original size.
#home, #Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
display: inline-block;
vertical-align: center;
}
#home:hover, #Alt:hover {
background: #6495ED;
border-radius: 50px;
width: 105px;
line-height: 55px;
font-size: 22.5px;
cursor: pointer;
}
<div id="home">Home</div><div id="Alt">test</div>
<div>s naturally stack over one-another as they carry a block display by default.
In order to line them up, you may consider setting an inline-block display for both the #home and #Alt:
#home, #Alt {
display: inline-block;
vertical-align: middle;
}
You may also add a vertical-align: middle for a better appearance on hover (as suggested by another answer).
#home {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#home:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#Alt {
background: #5F9EA0;
border-radius: 25px;
margin: auto;
width: 100px;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#Alt:hover {
background: #6495ED;
border-radius: 50px;
margin: auto;
width: 105px;
line-height: 55px;
text-align: center;
font-size: 22.5px;
cursor: pointer;
}
#home, #Alt {
display: inline-block;
vertical-align: middle;
}
<div id="home">Home</div>
<div id="Alt">test</div>
Here is the code:
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
If you run this code, you can see that the text "M" is not centered as I imagined. It works fine if you change the font-size to 30px or smaller. How did that happen? And how can I center the "M" right in the middle?
Another thing is although the "M" is not HORIZONTALLY centered, it seems that the "M" is still VERTICALLY centered. BUT, if I change the "M" to a "+", it will not be centered neither HORIZONTALLY nor VERTICALLY. BTW, it works perfectly in Chrome 53, I found that after I upgraded my Chrome.
Sorry about the poor English, hope you can understand what I mean.
You can use Flexbox and if you set align-items: center and justify-content: center it will always center text in span.
span {
margin: 20px;
width: 30px;
height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
cursor: pointer;
color: green;
display: flex;
align-items: center;
justify-content: center;
}
<span>M</span>
<span>+</span>
<span>A</span>
Another option is to use pseudo-element to add letter and use position: absolute and transform: translate to center it.
span {
margin: 20px;
width: 30px;
height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
cursor: pointer;
position: relative;
}
span:after {
position: absolute;
left: 50%;
top: 50%;
content: 'M';
color: green;
transform: translate(-50%, -50%);
}
<span></span>
I think just change the width and height with 100%..
#add_cal_in {
width: 100%;
height: 100%;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
You can center letter horizontally by script:
var marginLeft = ($('#add_cal_in').width() - $('.letter').width())/2;
$('.letter').css('margin-left', marginLeft+'px');
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="add_cal_in"><span class="letter">M</span></span>
Do you mean like this?
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
I would like to have the text "Hellow World!" to be to the align right and to be vertical middle.
Don't know how to do it.
https://jsfiddle.net/BRxKX/5945/
Thanks!
It should be working for IE, CHrome and FF.
div {
height: 200px;
width: 450px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
margin-top: 0;
text-align: right;
vertical-align: middle;
}
<div>
Hello World!
</div>
Just set display: table-cell;
All browsers - http://caniuse.com/#search=table-cell
CSS
div {
display: table-cell;
height: 200px;
width: 450px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
margin-top: 0;
text-align: right;
vertical-align: middle;
}
DEMO HERE
A simple way to achieve vertical-centering is by making the line-height the same as the div height:
div {
height: 200px;
line-height: 200px;
width: 450px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
margin-top: 0;
text-align: right;
vertical-align: middle;
}
<div>
Hello World!
</div>
If you use the block only for "Hello world", then I would do the following:
div {
display:inline-table;
max-width:300px;
padding:50px 100px;
background-color:#000000;
color:#ffffff;
}
It uses padding and display of inline-table to draw the box. You can change padding values as per your need.
Try this:
div {
height: 200px;
line-height: 200px;
width: 450px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
margin-top: 0;
text-align: right;
}
You could make a before element with a width on 0 to give it something to align to.
HTML:
<div>
<p>
Hello World!
</p>
</div>
CSS:
div {
height: 200px;
width: 450px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
margin-top: 0;
text-align: right;
}
p {
height: 100%;
vertical-align: middle;
display: inline-block;
}
p:before {
content: '';
height: 100%;
width: 0;
vertical-align: middle;
display: inline-block;
position: relative;
}
Flexbox option
div {
height: 200px;
width: 450px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
margin-top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
<div>
Hello World!
</div>
I'd like to align both sets of text in the buttons centrally vertically. How do I do this?
My Demo: http://jsfiddle.net/fc6317ne/
a.block {
color: #ffffff;
background: #F0F0F0;
font-size: 0.8rem;
height: 60px;
text-align: center;
text-decoration: none;
width: 30%;
float: left;
margin-right: 10px;
margin-bottom: 10px;
display: inline-block;
vertical-align: middle;
}
Button
Button That Has More Words
You can use display:table property on anchor and then wrap the text inside a span, and display it as table-cell, with vertically aligning the span in middle.
You wont need to adjust line-height or padding for this. Fiddle
a.block {
color: #red;
background: #F0F0F0;
font-size: 0.8rem;
height: 60px;
text-align: center;
text-decoration: none;
width: 30%;
float: left;
margin-right: 10px;
margin-bottom: 10px;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
}
<span>Button</span>
<span>Button That Has More Words</span>
Just add line-height: 60px; to your a.block css
Fiddle: http://jsfiddle.net/ghorg12110/fc6317ne/1/
Try like this: Demo
CSS:
a.block {
color: #000;
background: #F0F0F0;
font-size: 0.8rem;
height: 60px;
line-height:60px;
text-align: center;
text-decoration: none;
width: 30%;
float: left;
margin-right: 10px;
margin-bottom: 10px;
display: block;
vertical-align: middle;
}
span{
line-height:22px !important;
display: inline-block;
vertical-align: middle;
}
HTML:
<span>Button</span>
<span>Button That Has More Words</span>