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;
}
Related
I want this line to be placed in the middle under the title, but it doesn't work when I try text-align.
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title{
position: relative;
top: 70px;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
}
.title::after {
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
}
enter image description here
I'm sorry in advance because it's not the time for me to click on the recommendation yet. Thank you for all your answers.
Will this do?
body {
background-color: #000;
}
section {
position:relative;
}
.title{
color: #fff;
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
border-bottom-width: 50%;
}
.title::after {
position:absolute;
display: block;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
left: 25%;
}
<body>
<section>
<div class="title">What I Play</title>
</section>
</body>
text-align: center aligns the inline content of that element, not the element itself.
you probably want to use margin: 0 auto; for .title::after.
I found a solution to your issue. you have to change small changes in your CSS and also you have to add some css in .title-box class.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background-color: #000;
color: #FFF;
font-family: 'Noto Sans KR', sans-serif;
}
.title-box{
text-align:center;
}
.title{
line-height: 15px;
letter-spacing: 1em;
font-size: 30px;
display: block;
text-align: center;
display: inline-flex;
flex-direction: column;
}
.title::after {
display: flex;
width: 300px;
height: 20px;
border-bottom: 3px solid #FFF;
content: "";
color: #FFF;
text-align: center;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 title-box">
<h1 class="title">What I Play</h1>
</div>
</div>
</div>
</body>
</html>
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 want the div with class name user to be at the top of the page, rather than underneath the card div where it currently is.
I changed the display: to absolute and inline-block and that did not work either.
.card {
opacity: 0.8;
}
.card:hover{
opacity: 1;
}
.card {
height: 450px;
width: 320px;
box-shadow: 1px 1px 20px grey;
word-wrap: break-word;
background-color: #564f4c;
border-radius: 10px;
margin: 12px;
text-align: center;
display: inline-block;
}
img {
width: 100%;
height: 270px;
border-radius: 10px;
}
.info .name {
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin-top: 9px;
font-size: 35px;
color: white;
}
.answer, .reject {
text-align: center;
width: 47%;
height: 40px;
color: white;
line-height: 40px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
border-style: none;
}
.answer:hover, .reject:hover, .profile:hover {
box-shadow: 1px 2px 3px grey;
cursor: pointer;
}
.answer {
background-color: #3add0d;
display: inline-block;
}
.reject {
display: inline-block;
background-color: #ff2b2b;
}
.phone {
text-align: center;
width: 100%;
margin-top: 15px;
height: 40px;
display: inline-block;
}
.profile {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dd520d;
color: white;
/*position: relative;*/
margin-top: 10px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
}
.user {
height: 100px;
width: 100px;
background-color: blueviolet;
display: inline-block;
}
<!DOCTYPE html>
<head>
<title>Card</title>
</head>
<body>
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
<div class="user">it should be at the top not here</div>
</body>
</html>
After setting up your code in jsFiddle now I see what you want.
Add float: left to .card and .user
Add a wrapper around the entire bit you have and add this class to it:
.clearfix::after {
content: "";
clear: both;
display: table;
}
So with those floats added to your CSS classes your HTML should look like this
<div class="clearfix">
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
<div class="user">it should be at the top not here</div>
</div>
<div>
<p>
I'm a new div
</p>
</div>
Anything inside the clearfix div will float, anything outside of it will work as a normal div.
See Fiddle: https://jsfiddle.net/323x9oxm/
Firstly move the <div class="user"> above the <div class="card"> in the HTML, and then remove the display: inline-block; from the .card CSS.
See updated code below:
.card {
opacity: 0.8;
}
.card:hover {
opacity: 1;
}
.card {
height: 450px;
width: 320px;
box-shadow: 1px 1px 20px grey;
word-wrap: break-word;
background-color: #564f4c;
border-radius: 10px;
margin: 12px;
text-align: center;
}
img {
width: 100%;
height: 270px;
border-radius: 10px;
}
.info .name {
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
margin-top: 9px;
font-size: 35px;
color: white;
}
.answer,
.reject {
text-align: center;
width: 47%;
height: 40px;
color: white;
line-height: 40px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
border-style: none;
}
.answer:hover,
.reject:hover,
.profile:hover {
box-shadow: 1px 2px 3px grey;
cursor: pointer;
}
.answer {
background-color: #3add0d;
display: inline-block;
}
.reject {
display: inline-block;
background-color: #ff2b2b;
}
.phone {
text-align: center;
width: 100%;
margin-top: 15px;
height: 40px;
display: inline-block;
}
.profile {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #dd520d;
color: white;
/* position: relative;*/
margin-top: 10px;
font-size: 20;
font-family: Verdana, Geneva, sans-serif;
}
.user {
height: 100px;
width: 100px;
background-color: blueviolet;
display: inline-block;
}
<body>
<div class="user">Look, I'm at the top now.</div>
<div class="card">
<img src="http://video.blastingnews.com/p/4/2017/02/10/en_gomez090217.jpg" alt="Selena Gomez">
<div class="info">
<div class="name">Selena Gomez</div>
<div class="phone">
<div class="answer">Answer</div>
<div class="reject">Reject</div>
</div>
</div>
<div class="profile">View Profile</div>
</div>
</body>
Let me know if you need any other help.
I want to achieve this:
So I tried this: https://jsfiddle.net/bv68ykz0/
h1{
color: #df5e54;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 300;
text-align: center;
background: #df5e54;
padding: 5px 20px 5px 20px;
border-radius: 20px;
color: #f2e4d7;
}
<h1> Headline </h1>
But as you can see the background of the headline is going through the whole screen. What do I have to do to make it look like in the picture?
as i understand from your question, the problems are not the horizontal lines but the background of the heading so there are a number of ways to do this
1. use display:inline-block and wrap h1 inside a div with text-align:center
h1{
color: #df5e54;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 300;
text-align: center;
background: #df5e54;
padding: 5px 20px 5px 20px;
border-radius: 20px;
color: #f2e4d7;
display:inline-block;
}
div {
text-align:center;
}
<div>
<h1>
Headline
</h1>
</div>
2. wrap the text inside the h1 in a span and apply CSS styles to it
h1{
color: #df5e54;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 300;
text-align: center;
color: #f2e4d7;
}
h1 span {
background: #df5e54;
padding: 5px 20px 5px 20px;
border-radius: 20px;
}
<h1>
<span>Headline</span>
</h1>
P.S. The solution depends of the rest of your HTML structure.
You can try this:
.text-holder {
text-align: center;
position: relative;
z-index: 2;
}
h1 {
display: inline-block;
color: #df5e54;
margin: 0;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 300;
text-align: center;
background: #df5e54;
padding: 5px 20px 5px 20px;
border-radius: 20px;
color: #f2e4d7;
position: relative;
z-index: 3;
}
.text-holder:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 1px;
background: #df5e54;
z-index: 1;
}
<div class="text-holder">
<h1>
Headline
</h1>
</div>
Hope this helps!
If flexbox is an option you can do this:
Use a wrapper and give it display: flex
Create the lines using psuedo elements
align-items:center takes care of the vertical alignment while justify-content: center takes care of the horizontal alignment
flex: 1 given to the lines makes the line take all the whitespace left after the h1
See demo below:
h1 {
color: #df5e54;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 300;
text-align: center;
background: #df5e54;
padding: 5px 20px 5px 20px;
border-radius: 20px;
color: #f2e4d7;
}
.wrapper {
display: flex;
align-items:center;
justify-content: center;
background: #F2E4D7;
}
.wrapper:after,
.wrapper:before {
content: '';
border-top: 1px solid red;
flex: 1;
height: 0;
}
<div class="wrapper">
<h1>
Headline
</h1>
</div>
You can try something like
h1{
color: #df5e54;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 300;
text-align: center;
position:relative;
background:#F2E4D7;
color: #f2e4d7;
}
h1 span:first-child{
padding: 5px 20px 5px 20px;
border-radius: 20px;
background: #df5e54;
display:inline-block;
position:relative;
z-index:1;
}
h1 span:nth-of-type(2){
position:absolute;
top:50%;
border-top:1px solid #df5e54;
height:1px;
width:100%;
left:0;
}
<h1>
<span>Headline</span>
<span> </span>
</h1>
Fiddle Demo
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;
}