This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 4 years ago.
I am centering inner div insTabsContainer using margin: 0 auto but it's not getting center. Will you guys tell me what's I did wrong here.
HTML
.insTabsContainer {
margin: 0 auto;
}
.insTabs {
position: relative;
float: left;
width: 32%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
<div class="col-sm-12">
<div class="insTabsContainer">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
you can use flex. for this.
.insTabsContainer {
display: flex;
justify-content: center;
}
.insTabs {
position: relative;
float: left;
width: 25%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
.insTabs:last-child {
margin-right:0;
}
<div class="col-sm-12">
<div class="insTabsContainer">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
if you use
margin: 0 auto;
it should have a width, but you can use simply
display:table;
.insTabsContainer {
display:table;
margin: 0 auto;
}
You should set width in order to see that it's center:
.insTabsContainer {margin: 0 auto; width: 90%;}
You can achieve this using flex-box
.insTabsContainer {
}
.insTabsContainer:after {
content: "";
display: table;
clear: both;
}
.insTabs {
position: relative;
float: left;
width: 10%;
height: 25px;
background-color: #E5E7E9;
text-align: center;
line-height: 20px;
text-transform: uppercase;
font-size: 13px;
color: #2C3E50;
border-radius: 6px;
margin-right: 5px;
cursor: pointer;
}
.text-center {
text-align: center;
}
.d-flex {
display: flex;
justify-content: center;
}
<div class="col-sm-12 text-center">
<div class="insTabsContainer d-flex">
<div class="insTabs active">Text</div>
<div class="insTabs">Text</div>
<div class="insTabs">Text</div>
</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Closed 3 years ago.
I know that this question was asked many many times, but no matter what I try it doesn't work
Here is a part of the html;
<div class="bookmark-container">
<div class="bookmark-set">
<div class="bookmark-title">Daily</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
</div>
</div>
And this is the css (note that I removed my attemps at centering the images because nothing worked);
.bookmark-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 50%;
margin: 1em 0em;
}
.bookmark-set{
padding: 1em;
background-color: #322441;
font-family: "Roboto";
font-size: .85em;
width: 25%;
height: auto;
margin: 0em .5em;
}
.bookmark-inner-container {
height: 80%;
vertical-align: top;
}
.bookmark-title {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin: 0em 0em .35em 0em;
}
.bookmark {
color: #fff;
display: block;
margin: .5em 0em;
}
img {
max-height: .9rem;
margin-right: 6px;
}
Here are the files
You could use flexbox to do that. Just add this to your code:
.bookmark {
display: flex;
align-items: center;
}
Working example: https://jsfiddle.net/ajobi/ajcezv67/4/
Try this
.bookmark-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 50%;
margin: 1em 0em;
}
.bookmark-set{
padding: 1em;
background-color: #322441;
font-family: "Roboto";
font-size: .85em;
width: 25%;
height: auto;
margin: 0em .5em;
}
.bookmark-inner-container {
height: 80%;
vertical-align: top;
}
.bookmark-title {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin: 0em 0em .35em 0em;
}
.bookmark {
color: #fff;
display: flex;
align-items: center;
margin: .5em 0em;
}
.bookmark img{
padding-right: 10px;
}
<div class="bookmark-container">
<div class="bookmark-set">
<div class="bookmark-title">Daily</div>
<div class="bookmark-inner-container">
<a class="bookmark" href="https://inbox.google.com/"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"/>Inbox</a>
</div>
</div>
Try this:
img {
max-height: .9rem;
margin-right: 6px;
vertical-align: text-top;
}
I was wondering how I can position the text centered horizontally. Centered horizontally with the image. I do not want to use the position: absolute attribute. This is because the length of the right and left text can change and to have an absolute attribute, you need a fixed width/size.
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You can use flexbox to align items horizontally center by adding below code to the parent div
.parent{
display:flex;
align-items: center;
}
This is the running Snippet of your code having this changes
body{
padding: 0;
margin: 0;
font-family: arial;
}
.content{
display: flex;
align-items: center;
}
.right-text {
font-size: 13px;
}
.icon {
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
font-size: 13px;
font-weight: 700;
}
<div class="content">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
You can just simply add a flexbox container and set its property align-items to center.
<div class="container">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
And this is the class container:
.container{
display: flex;
align-items: center;
justify-content: center;
}
Hi If you want vertical align here is the updated snippet
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
top: 10px;
margin: 0 5px;
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You actually need to wrap your right-text, icon and left-text element in childContainer and then wrap your childContainer element in parentContainer wrap.
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
Next, you have to apply FlexBox with center justify-content and align-items value and you also need to add height: 100vh. Mentioned changes are applied on a below code snippet. Try this I hope it'll help you out. Thanks
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
.parentContainer {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I've tried vertical-align: middle; and margin: auto 0; but it doesn't seem to be working? Is there something I'm missing here? My logic is, I put the vertical-align: middle; in the parent container. Shouldn't that center the "children" class into the center vertically? I've also tried adding, padding:auto 0; to the "children" class but that didn't seem to do anything either...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
Try to use display:flex here in the parent class .content and margin:auto in .children class to center it horizontally and vertically...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
However vertical-align works on tables with display:table-cell...and also you will need to apply vertical-align:middle in the elements itself not in the parent
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
use flex method to vertical align.
https://jsfiddle.net/raj_mutant/529bcr98/
so I am doing this project and i've started to run into problems with display properties and elements not positioning as i would want them to. Here's what i have so far: https://codepen.io/benasl/pen/zdMbKQ
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
}
.below {
display: flex;
clear: both;
width: 50%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
</div>
</div>
</div>
Everything was okay before i added the .below class with all its content, what i need is .left to be on the left and .rightto be in the right..
I've tried all sorts of display properties, none of them seem to work.
Note, your markup and CSS can be cleaned up a lot, though I choose not to do that for your.
If you move the .below element's into each .left/.right element, add flex-wrap: wrap to the .left/.right rules, and use calc() for the aside's width (so it take border/margin into account), you'll get a good start of both see how Flexbox works and to restructure your markup.
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
flex-wrap: wrap;
}
.below {
display: flex;
clear: both;
width: 100%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
flex-wrap: wrap;
}
aside {
width: calc(40% - 18px);
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
margin-right: 15px;
}
section {
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
Add display: flex to the wrapper.
Wrap top left content in a new wrapper (in this case .left-top) to separate it from below.
Separate left and right and add flex-direction: column to stack left-top and below.
*Avoid mixing flex and float
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin: 0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: flex;
width: 100%;
}
.left {
padding-right: 10px;
border-right: 1px solid #797977;
display: flex;
}
.below {
display: flex;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size: bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background: #868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border: none;
color: #c3c3c2;
cursor: pointer;
transition: all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
.left,
.right {
flex-direction: column;
}
<div id="container">
<div class="wrapper">
<div class="left">
<div class="left-top">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(all 6 are wrapped in a <header>)
This is my css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?
Here's the code you're looking for, I hope: (These are not the droids you're looking for)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
Use Following CSS,
You Can Get a <p> and a link both be at centered,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
Here is the Jsfiddle solution link.
http://jsfiddle.net/rbdqtxyf/