I am trying to vertically center some text contained within divs within another div. For the life of me I cannot get it to work.
Here is a JSfiddle for the code. I want the two pieces of text to be vertically centered between the top of the page and the bottom of the div which is the bottom border.
.logo1 {
font-family: Helvetica;
font-size: 36px;
letter-spacing: -0.05em;
text-align: left;
display: inline-block;
width: 525px;
}
.orange {
color: #e68217;
font-weight: bold;
}
.nav {
color: black;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.05em;
text-align: right;
width: 300px;
display: inline-block;
}
div.head {
margin: auto;
width: 850px;
height: 100px;
border-bottom: 3px solid #cccccc;
}
<div class="head">
<div class="logo1">
foo<span class="orange">bar</span>
</div>
<div class="nav">
portfolio
<span style="color: #cccccc">|</span>
about me
<span style="color: #cccccc">|</span>
contact me
</div>
</div>
Use the following CSS code:
.nav {
color: black;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.05em;
text-align: right;
display: inline-block;
vertical-align:middle;
width: 300px;
padding-top:38px;
}
Related
I have an h1 tag in a div, and I would like for it to be pushed down from right up to the top of the div. I have tried adding a top margin on the h1 but that doesn't help. When I put some text in the div '#contact', Suddenly the h1 moves down. Is there a way to move the h1 down without text in '#contact'? Thank you in advance.
Snippet:
<div style="float:left; margin: 0; width: 100%;background-color:#eeeeee;font-size: 20px;color: #252a30;text-align: center;">
<style>
.half {
width: 40%;
margin: 3%;
font-size: 0.7em;
display: block;
}
.hl {
text-align: left;
float: left;
}
.hr {
text-align: right;
float: right;
}
.project-tags {
color: #b2c6cd;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
opacity: 1;
text-transform: uppercase;
}
.half ul, .half h1 {
margin-bottom: 0px;
margin-top: 0px;
}
.half h1 {
margin-bottom: 5px;
}
.project-tags li {
color: #fed766;
}
.project-tags span {
color: #b2c6cd;
}
.half p {
font-weight: 300;
font-size: 20px;
}
.button-primary {
margin: 10px 0 60px;
color: #252a30;
background-color: rgba(0, 0, 0, 0);
border: 2px solid #FED766;
height: auto;
font-size: 1rem;
line-height: normal;
text-transform: uppercase;
font-weight: 700;
transition: all .3s ease-in-out;
letter-spacing: 0;
border-radius: 50px;
display: inline-block;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
outline: 0;
padding: 1.0rem 3.0rem;
}
.button-primary:hover {
color: #FED766;
background-color: #252a30;
border: 2px solid #252a30;
padding: 1.0rem 3.5rem;
}
.on-ylw {
border: 2px solid #252a30;
}
</style>
<p id="projects"></p>
<h1>My Projects</h1>
<p style="font-weight: 300;">Examples of my work</p>
<div class="projects" style="margin: 0 15%;">
<div class="half hl">
<h1>Text</h1>
<ul class="project-tags">
<li><span>Python</span></li>
</ul>
<p>Text</p>
Visit Website
</div>
<div class="half hr">
<img src="image" alt="link" style="border-radius: 10px;position: relative: width: 100%; border-style: none;">
</div>
</div>
</div>
<div style="margin: 0; width: 100%; background-color: #FED766;position: static;">
<div id="contact"></div>
<br>
<br>
<h1 style="text-align: center; font-weight: bold; color: #000000; font-size: 40px;">Want To Contact Me</h1>
<p style="text-align: center; font-weight: 300; font-size: 25px; color: #000000;">I'm currently accepting new projects and would love to hear about yours.</p>
<br>
<button class="button-primary on-ylw" style="display: table; margin: 0 auto;">Contact Me</button>
<br>
<br>
</div>
Add:
clear: both;
property to the <div> that the h1 is in.
The div up the DOM you have float: left; therefore it's not actually in the dom where you'd expect.
Then you should be able to add marign-top to the H1 as expected.
I'm creating a child theme for WooCommerce's Storefront theme. My issue is with the navbar, where the navigation elements do not get centered horizontally. Please take a look at the code, as well as the image on the navbar. The navigation div has a background-color of red so it's easier to identify the issue.
Navbar Image
| JSFiddle with code
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
height: 70px;
line-height: 70px;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
height: 70px;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>
Pay attention to the fact that your inline-block elements are not aligned.
So I've aligned them vertically.
Another thing, is that you don't need the height:70px, instead define line-height: 70px, on the parent, it will propagate to the children.
.navbar {
line-height: 70px;
width: 100%;
border-bottom: 1px solid black; /* Change */
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
margin: 0;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>
I asume that you want the logo far left and the social icons far right. To achieve this I would use:
.logo {
float:left;
}
.icons {
float: right;
}
you could also use position absolute.
Now you have two options:
aligning the navigation elements center. To do this you have to set the navigation to text-align: center and display: block:
.navigation {
display: block;
margin-left: 0px;
text-align: center;
background-color: red;
}
You could give the .navbar a text-align: center:
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
I'm trying to get the "footer" div to sit below the "main" div, except it keeps appearing next to it. I just want it to sit directly below the preceding div (not be forced to the bottom), except it always seems to sit below the header.
<body>
<div class="wrapper">
<div class="header">
Heading
</div>
<div class="main">
Content
</div>
<div class="footer">More details on how you can help coming soon.</div>
</div>
</body>
CSS:
body {
background-image: url("./../img/bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
margin: 0;
padding: 0;
}
.header{
color: #FFFFFF;
font-size: 14vw;
text-align: center;
font-family: OSWALD;
font-style: normal;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
width: 100%;
line-height: 1.2em;
}
.main{
display: inline-block;
width: 300px;
height: 380px;
overflow: hidden;
padding: 19px 22px 7px;
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
font-family: "futura-pt", sans-serif;
letter-spacing: 2px;
line-height: 45px;
position: absolute;
right: 0px;
}
.contact{
border-top: 6px solid #e2d056;
border-bottom: 6px solid #e2d056;
width: 250px;
margin: 25px 0 0;
padding: 10px 22px 10px;
text-align: center;
}
.footer {
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
font-family: "futura-pt", sans-serif;
letter-spacing: 2px;
line-height: 25px;
text-align: left;
padding-left: 30px;
}
You could just remove display: inline-block; altogether since it doesn't appear to have a purpose.
If you still need the display: inline-block; you can use .footer { clear: both; } or do .main { float: left; clear: both; }.
Just change postion:absolute to position:relative for .main as absolute takes the div element out of the layout flow.
.main {
position:relative;
}
Here's a jsfiddle with updated code: https://jsfiddle.net/AndrewL32/ewaLf4ct/
Use .footer { clear: both; }.
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;
EDIT: Oh and I tried margin but I want it to be responsive and to stick along the with the title when viewed from different screens
Sorry, it may be a simple question but I can't get it to work
I'm trying to center a text with in a rectangle that tells in which category the article is in
http://i.imgur.com/J8PkfBa.png
Jsfiddle link http://jsfiddle.net/bwpyypza/
h1 {
text-align: center;
font-family: sans-serif;
}
.section {
background-color: rgb(202, 0, 0);
padding: 10px;
margin: 25px;
color: white;
display: inline-block;
text-align: center;
font-size: 50%;
letter-spacing: 5px;
font-family: open-sans;
}
<hr>
<div class="section">PARENTING</div>
<h1>Title of the Article</h1>
<hr>
Wrap your section with in a div:
html
<hr>
<div id="sectionCont">
<div class="section">PARENTING</div>
</div>
<h1>Title of the Article</h1>
<hr>
And then use text-align: center
css
#sectionCont {
text-align: center;
}
fiddle
h1 {
text-align: center;
font-family: sans-serif;
}
.section {
background-color: rgb(202, 0, 0);
padding: 10px;
width:200px;
margin-left:auto;
margin-right:auto;
color: white;
text-align: center;
font-size: 50%;
letter-spacing: 5px;
font-family: open-sans;
}
<hr>
<div class="section">PARENTING</div>
<h1>Title of the Article</h1>
<hr>
Try this
As your rectangle is defined as inline-block, the simplest and most consistent would be to set text-align:center in the container:
h1 {
text-align: center;
font-family: sans-serif;
}
.section {
background-color: rgb(202, 0, 0);
padding: 10px;
margin: 25px;
color: white;
display: inline-block;
text-align: center;
font-size: 50%;
letter-spacing: 5px;
font-family: open-sans;
}
.container {
text-align: center;
}
<div class=container>
<hr>
<div class="section">PARENTING</div>
<h1>Title of the Article</h1>
<hr>
</div>
All you need is small changes like this:
h1 {
text-align: center;
font-family: sans-serif;
}
.section {
text-align: center;
}
.section span {
background-color: rgb(202, 0, 0);
padding: 10px;
margin: 25px;
color: white;
display: inline-block;
text-align: center;
font-size: 50%;
letter-spacing: 5px;
font-family: open-sans;
}
<hr>
<div class="section"><span>PARENTING</span></div>
<h1>Title of the Article</h1>
<hr>
Modify your css file for following code snippet
.section {
background-color: rgb(202, 0, 0);
padding: 10px;
margin: 25px;
color: white;
display: inline-block;
text-align: center;
font-size: 50%;
letter-spacing: 5px;
font-family: open-sans;
margin-left: auto;
margin-right: auto;
}