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/
Related
I'm working on a website. For some reason, my navbar isn't being very cooperative. I have set up links to other pages on the site, and have floated them to the right. However, they don't seem to move as far right as I want them to. If I use margin-right or left, then when I resize the browser it isn't responsive. But the float property keeps it responsive even though it stays around the center of my nav. Here's my code:
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>
```
Any help is greatly appreciated
Thanks!
Try this sample, float is not a preferred way of laying out elements in a modern web. Please use flex-box;
The cause of the width to the right is caused by the padding: 2% 10%;, which I have modified.
Remove the visual backgrounds.
nav{
width:100%;
}
.navbar-wrapper{
background: blue;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
background: green;
width: 50%;
height: 10px;
}
.rightside{
width: 50%;
background: red;
}
.options{
background: yellow;
text-decoration: none;
width: 100%;
display: flex;
justify-content: flex-end;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
/* padding: 2% 10%; you need to change padding to position to the right correctly */
padding: 20px 10px;;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
/* you don't need float
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}*/
.rightside{
/*to position your links to the right*/
text-align: right;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
/* if you want all links in one line use inline instead*/
display: inline;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>
.options {
text-align: right;
}
I am working on a calculator layout and have a small issue with the layout. On the right side of the calculator, the black spacing on the edge of the calculator is slightly off. I've been banging my head trying to figure it out and was hoping that I could get some assistance with it. I have attached the link to the codepen for your review.
Click here to go to my Codepen
My CSS code is listed below:
.button-container > a {
width: 50px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px;
text-decoration: none;
#import url('https://fonts.googleapis.com/css?family=Merriweather:700|Roboto');
.button-container {
width: 209px;
height: 255px;
background: #1a1a1a;
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.button-container > a {
width: 51px;
height: 50px;
float: left;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px 0px 0px 1px;
text-decoration: none;
}
.calc-container{
height: 129px;
width: 209px;
background: black;
padding: 8em 0em ;
border-radius: .5em;
}
body {
background: #25383C;
margin: 10em 0 10em 40em;
}
.button-container .buttonE {
width: 51px;
height: 100px;
float: right;
margin: 0 auto ;
padding: 0px;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px;
text-decoration: none;
border-bottom-right-radius: .5em;
}
.button-container .button0 {
width: 155px;
height: 48px;
float: left;
line-height: 50px;
text-align: center;
color: white;
font-family: 'Roboto', serif;
background: #333333;
margin: 1px 0px 0px 1px;
text-decoration: none;
border-bottom-left-radius: .5em;
}
#blue {
color: #008b8b;
}
Please use the above CSS
there was margin issue *.button-container .buttonE *
I have arranged the anchor tag with text with borders.
I want to make the text to center inside the block.
I have tried padding, margin left, float but nothing is working.
body {
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title{
height: 17%;
width: 100%;
margin: 0%;
text-align: center;
font-size: 2rem;
color: white;
}
.subjects{
color: white;
width: 28%;
height: 7%;
border: 2px solid white;
font-size: 2rem;
border-radius:20px;
margin-top: 86px;
margin-left: 8px;
text-align:center;
vertical-align: middle;
}
.maths{
margin-left: 24%;
margin-top: 41px;
}
.maths a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 140px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px 103px;
padding-right: 206px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.chemistry{
margin-left: 24%;
margin-top: 41px;
}
.chemistry a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 169px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="title">
<h1>Syllabus</h1>
</div>
<div class="subjectsList">
<div class="subjects">
Syllabus
<span class="triangle"></span>
</div>
<div class="maths">
<a href="mathsinfo.html" target="_blank">
<!--<img src="images/maths.jpg" height="50px" width="50px" alt="Mathematics Icon">-->
Mathematics</a>
</div>
<div class="physics">
Physics
</div>
<div class="chemistry">
Chemistry
</div>
</div>
that physics text must be at middle.Can anyone help me out to solve this problem.
Just change the padding (left and right padding to half of what you had for right padding):
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 103px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="physics">
Physics
</div>
remove padding-right:206px; add text-align:center
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 0px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
text-align:center;
}
remove margin-left from .physicsc and padding-right from .physics a and set
.physics {
text-align: center;
}
.physics a {
width:30%; // or anything you need
}
Also check out centering guide.
Observe the following banner I have:
I want the "My Website" and "Your Go To Stop!" text to align both vertically and horizontally but I'm having difficulty getting that to happen.
JS Fiddle: http://jsfiddle.net/z63234p1/
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
<header id="masthead" class="site-header" role="banner">
<button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e( 'Toggle Sidebar', 'boardwalk' ); ?></span></button>
<div class="site-branding">
<div id="sitelogo" class="clear">
<h1 class="site-title">My Website</h1>
<h2 class="site-description">Your Go To Stop</h2>
</div>
</div>
</header>
I'm aware that the image above doesn't look at all like the output of JS Fiddle and I know that what I'm getting on my test site is a fluke rather than the actual output.
Can someone help me get my CSS worked out so that all of the text is vertically aligned within their cells and horizontally aligned accross the logo?
Thank you in advance.
Use this Css:
<style type="text/css">
#masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 73px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal
display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: normal;
min-width: 150px;
padding: 4px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 100%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 6px 16px;
font-size: 3vh;
line-height: 2.3;
float: left;
clear: none;
}
</style>
New css for #sitelogo:
display: inline-flex;
align-items: stretch;
New css for .site-title:
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
New css for .site-description:
background: #fff500;
color: black;
font-family: Impact, Charcoal, sans-serif;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
padding: 0 16px;
font-size: 3vh;
display: flex;
align-items: center;
justify-content: center;
Besides that I strongly suggest to not use vh for font-size.
I messed around with your line height of site-title as well as line height and height of site-description. Here's my result:
masthead {
top: 32px;
padding-right: 0px;
background: #000;
padding-left: 0;
max-height: 100px;
border-bottom: none;
position: fixed;
z-index: 3;
width: 100%;
min-height: 73px;
color: #000;
display: block;
box-sizing: inherit;
}
.sidebar-toggle {
float: left;
border: 3px solid grey;
border-right: none;
height: 82px;
margin-right: 0;
width: 5%;
overflow: hidden;
padding: 0;
color: #000;
text-align: center;
}
button {
border-radius: 0;
transition: all 125ms ease-out;
cursor: pointer;
-webkit-appearance: button;
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
line-height: 1.5;
display: inline-block;
align-items: flex-start;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.site-branding {
width: 95%;
display: inline-flex;
margin-top: 0;
margin-bottom: 0;
float: left;
max-width: 100%;
}
#sitelogo {
display: inline-flex;
vertical-align: middle;
text-align: center;
}
.site-title {
border: 3px solid grey;
font-family: Impact, Charcoal, sans-serif;
font-weight: normal;
margin: 0 auto;
text-align: center;
line-height: 58px;
min-width: 150px;
padding: 3px 8px;
font-size: 6vh;
height: 100%;
color: white;
float: left;
max-width: 100%;
}
h1 {
clear: both;
}
.site-description {
background: #fff500;
color: black;
display: block;
font-family: Impact, Charcoal, sans-serif;
margin: auto auto;
text-align: center;
height: 108%;
border-left: none;
border-top: 3px solid grey;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
display: block;
padding: 0 16px;
font-size: 3vh;
line-height: 3.7;
float: left;
clear: none;
}
.sidebar-toggle:before {
content: "\f419";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
speak: none;
text-decoration: inherit;
vertical-align: top;
font-style: normal;
font-weight: normal display: inline-block;
font-family: Genericons;
-webkit-font-smoothing: antialiased;
}
Here's a diff compare to see the differences: http://www.mergely.com/vGQedH1p/ Is this what you were looking for?
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;