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>
Related
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;
}
So, I got this currently:
http://gyazo.com/5d30270a775462fef170283162a9152e
How do I get the second sort of table to be at same position as the button, so in the center? Tried almost everything, can't think of anything else.
Please help me!
Current code:
.flat-table {
display: inline-block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: 90%;
text-align: center;
float: right;
}
th {
background-color: #f95252;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: #fff;
color: rgb(111, 111, 111);
padding: 20px 30px;
}
This is the code of the table.
What to do?
Thanks!
Make sure that the surrounding div's are floated and align everything in the div to the center by using: margin: 0 auto;
Look at this example:
<div class="top">menu</div>
<div class="middle">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</table>
</div>
<div class="bottom">button</div>
CSS:
.top {
height: 40px;
width: 100%;
float: left;
background-color: Red;
}
.middle {
width: 100%;
height: auto;
float: left;
}
.middle table {
width: 300px;
background-color: grey;
margin: 0 auto;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
}
.bottom {
height: 40px;
float: left;
width: 100%;
background-color: blue;
}
.bottom a {
display: block;
width: 100px;
margin: 0 auto;
height: 20px;
background-color: yellow;
line-height: 20px;
text-align: Center;
margin-top: 10px;
}
th {
background-color: #f95252;
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: #fff;
color: rgb(111, 111, 111);
padding: 20px 30px;
}
http://codepen.io/leongaban/pen/ACJta
^ Updated (I can never get SASS to work right in Codepen)
Can't align to the middle my elements above. Using SASS, I want to avoid using position hacks
<main>
<div class="gradient">
<div class="hero">
<img src="http://placehold.it/350x150" alt=""/>
</div>
</div>
<section class="tagline">
<h1>Hi there Lorem Ipsum <em>My name is Bob</em></h1>
<button>Learn More</button>
</section>
</main>
body {
font-family:Arial
}
.hero {
display: table-cell;
//position: relative;
margin: 0 auto;
// top: 42%;
// left: 10%;
text-align: center;
width: auto;
height: 447px;
vertical-align: bottom;
img {
width: 300px;
height: 280px;
text-align: center;
vertical-align: bottom;
border:0;
}
}
.tagline {
position: relative;
margin: 0 auto;
width: 100%;
height: 300px;
text-align: center;
color: blue;
background: gray;
z-index: 2;
h1 {
margin: 0 auto;
padding-top: 5%;
width: 80%;
font-size: 42px;
text-align: center;
}
em {
font-weight: bold;
}
button {
margin-top: 25px;
padding: 10px 20px;
font-family: Arial;
font-size: em(21);
color: white;
border: 0;
background: orange;
}
}
I was able to center your elements above my doing the following:
.hero {
margin: 0 auto;
text-align: center;
width: 50%;
height: 447px;
vertical-align: bottom;
}
It seems it did not want to center because you had specified width: auto
So I've made what I'm looking to achieve in jsfiddle. I'm wondering if there is an easier way to achieve this same effect:
<div class="date">
<span class="day">05</span>
<div class="dateHolder">
<span class="month">DEC</span>
<span class="year">2013</span>
</div>
.date {
position: absolute;
font-family: Arial;
font-weight: bold;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
}
.dateHolder {
margin-top: 10px;
}
.day {
font-size: 50px;
line-height: 60px;
float: left;
}
.month, .year {
float: right;
font-size: 20px;
line-height: 20px;
display: block;
}
I suppose that the simplest way to lay out these parts of the date and center them vertically is to use CSS table model:
.date {
font-family: Arial;
font-weight: bold;
position:absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
display: table;
}
.dateHolder {
display: table-cell;
vertical-align: middle;
text-align: right;
font-size: 20px;
line-height: 21px;
}
.day {
font-size: 50px;
line-height: 60px;
display: table-cell;
vertical-align: middle;
}
.dateHolder > span {
display: block;
}
No need in clearfix magic and margin/padding adjustment. Everything is aligned automatically.
I don't think that you need those month and year spans. It is enough to float their container. There is also clearfix missing. Here is the jsfiddle updated http://jsfiddle.net/krasimir/2gwwB/3/
That's the simplest markup and css which I can come up with.
<div class="date">
<span class="day">05</span>
<div class="dateHolder">
DEC<br />2013
</div>
</div>
The CSS:
.date {
font-family: Arial;
font-weight: bold;
position:absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
}
.date:after {
content: "";
clear: both;
display: block;
}
.dateHolder {
margin: 7px 0 0 10px;
float: left;
}
.day {
display: block;
font-size: 50px;
float: left;
}
Here is another minimalist example, display:inline-block is the key.
HTML:
<div class="date">
<span class="day">28</span>
<span class="month-year">APR<br />2022</span>
</div>
CSS:
.month-year {
display: inline-block;
font-size: 1.5em;
}
.day {
font-size: 4em;
}
See: http://jsfiddle.net/unb76dw9/13/