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>
Related
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 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>
How to centering that download button? I tested many times but it's wrong codes.
.col {
width: 100%;
height: auto;
float: left;
}
.download {
width: auto;
font-weight: 600;
font-size: 14px;
color: #000;
border: 2px solid #000;
padding: 17px 37px;
margin-top: 30px;
float: left;
}
<div class="col">
<span class="download">Download</span>
</div>
Just add text-align: center; to .col and replace float:left with display:inline-block; in the button element. jsfiddle
Remove float:left; from .download (because it forces the element to be floated to the left).
Give display:inline-block; (It acts like inline element, it means you can center it by giving text-align:center; to its parent.)
JSFiddle
.col {
width: 100%;
height: auto;
float: left;
text-align: center;
}
.download {
font-weight: 600;
font-size: 14px;
color: #000;
border: 2px solid #000;
padding: 17px 37px;
margin-top: 30px;
display: inline-block;
}
I know this question has been asked a lot but I can't find any fix working for my sample.
I read and tried solutions stated in alignment tutorial.
I tried playing with display: inline-block; and vertial-align: middle; as much as I could.
My HTML:
<div id="header_container">
<div id="logo"></div>
<div id="menu_and_social_icons_container">
<div id="menu_container">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--//menu_container-->
<div id="social_icons_container">
<div id="twitter_icon"></div>
<div id="pinterest_icon"></div>
</div><!--//social_icons_container-->
</div><!--//menu_and_social_icons_container-->
</div><!--//header_container-->
My CSS:
/* Header */
#header_container { padding: 10px 0 30px; width: 100%; height: auto; padding-top: 3%; border-bottom: 1px solid #CBCBCB; display: inline-block; }
#logo { background: #aaa; width: 200px; height: 100px; float: left; vertical-align: middle; }
#menu_and_social_icons_container { float: right; display: inline-block; vertical-align: middle; }
#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; float: left; font-family: 'Lato', sans-serif; vertical-align: middle; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; }
#menu_container ul li:hover { font-weight: 900; }
#social_icons_container { float: right; vertical-align: middle; }
#social_icons_container div { width: 50px; height: 50px; float: left; margin-left: 25px; }
#twitter_icon { background: #555; }
#pinterest_icon { background: #888; }
Here is a JSFiddle to make things easier.
Vertical-align won't work with Floated elements.
Remove float and try to do it with inline-block alone.
Here is the solution fiddle. http://jsfiddle.net/yvxb1os1/11/
/* Header */
#header_container { padding: 10px 0 30px; width: 100%; height: auto; padding-top: 3%; border-bottom: 1px solid #CBCBCB; display: inline-block; }
#logo { background: #aaa; width: 200px; height: 100px; display: inline-block; vertical-align: middle; }
#menu_and_social_icons_container { display: inline-block; vertical-align: middle; width: calc(100% - 204px); }
#menu_container { text-transform: uppercase; font-size: 1.3em; font-style: bold; font-family: 'Lato', sans-serif; vertical-align: middle; display: inline-block;}
#menu_container ul { list-style-type: none; }
#menu_container ul li { display: inline-block; margin-left: 20px; text-decoration: none; color: #4e918b; }
#menu_container ul li:hover { font-weight: 900; }
#social_icons_container { float: right; vertical-align: middle;}
#social_icons_container div { display: inline-block; width: 50px; height: 50px; float: left; margin-left: 25px; }
#twitter_icon { background: #555; }
#pinterest_icon { background: #888; }
Thanks to "Vertical-align won't work with Floated elements." from #user387249, I found the best solution in my case. See Justin Drury's answer for more details.
Most important change:
#logo_container:after, #menu_container:before, #social_icons_container:before { height: 100%; content: ''; font-size: 0; vertical-align: middle; display: inline-block; }
And height: 100% on my 3 floated div.
Here is the updated JSFiddle.
I'm trying to center this text horizontally and vertically, ideally based on percentages (for responsive-ness). I can't figure out why this isn't working.
Fiddle: http://jsfiddle.net/PTSkR/144/
Code:
<div class="row-fluid card-box">
<div class="span2 card-box-controls-container">
<div class="card-box-controls">
<a >edit</a>
<a >delete</a>
</div>
</div>
</div>
.card-box .card-box-controls-container {
height: 160px;
vertical-align: middle;
display: inline-block;
text-align: center;
color: black;
font-size: 14px !important;
}
.card-box .card-box-controls-container .card-box-controls {
vertical-align: middle;
display: inline-block;
text-align: center;
color: black;
font-size: 14px;
}
.card-box .card-box-controls a {
cursor: pointer !important;
color: gray;
text-decoration: none;
margin: 0;
vertical-align: middle;
font-size: 14px;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
You can use display:table, for example:
.card-box .card-box-controls-container {
height: 160px;
vertical-align: middle;
display:table;
text-align: center;
color: black;
font-size: 14px !important;
width: 100%;
}
.card-box .card-box-controls-container .card-box-controls {
vertical-align: middle;
display: table-cell;
text-align: center;
color: black;
font-size: 14px;
}
.card-box .card-box-controls a {
cursor: pointer !important;
color: gray;
text-decoration: none;
margin: 0;
vertical-align: middle;
font-size: 14px;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
pls view the demo. and you can use display:inline-block, for example:
.card-box .card-box-controls-container {
height: 160px;
text-align: center;
color: black;
font-size: 14px !important;
}
.card-box .card-box-controls-container:after{
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0px;
background: red;
}
.card-box .card-box-controls-container .card-box-controls {
vertical-align: middle;
display: inline-block;
text-align: center;
color: black;
font-size: 14px;
position: relative;
}
.card-box .card-box-controls a {
cursor: pointer !important;
color: gray;
text-decoration: none;
margin: 0;
vertical-align: middle;
font-size: 14px;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
pls view the demo.
There are other ways, pls click here and here.
You can use line-height: 160px on .card-box .card-box-controls-container if you want to center only one line.
http://jsfiddle.net/PTSkR/146/
There's no easy way to vertically align content in html or css more info #
http://blog.themeforest.net/tutorials/vertical-centering-with-css/