I tried to use the text-align in CSS but it does not work.
here is the CSS and I also had all the body set to center, does that have to do with something?
Here is my CSS:
#Swell {
text-align: left;
}
Here is my HTML:
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
Also my CSS body text-align:
body {
font-family: sans-serif;
text-align: center;
background-color: rgb(128, 212, 255);
}
Dose the text-align: center have to do with the error and if that is true then how do I overwrite/fix this error
An anchor element <a> is an inline element per default. Meaning it has no width or height on its own but rather is exactly as big as its content.
The text-align property does work in your example. It's just that the text is aligned regarding it's container. Which in this case is exactly as big as it's content. Therefore you would not see any difference.
Try to set the display property of the anchor element to block and see what happens.
a{
display:block;
text-align:right;
}
<a>Blocking beautiful</a>
Edit: More in line with your example:
body{
text-align:center;
}
a{
display:block;
text-align:left;
}
<body>
<a>Still beautiful</a>
<span>centered</span>
</body>
html
<div id="parentdiv">
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
</div>
css
body {
font-family: sans-serif;
text-align: center;
background-color: rgb(128, 212, 255);
}
#parentdiv {
text-align: left;
}
Example
<html>
<style>
body {
font-family: sans-serif;
text-align: center;
background-color: rgb(128, 212, 255);
}
#parentdiv {
text-align: left;
}
</style>
<div id="parentdiv">
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
</div>
</html>
Related
The story title is not centering, when I change it to h1, it just disappears. I am really not sure why this is.
storytitle {
background-color: black;
font-color: #ff0000;
font-size: 150%;
text-align: center;
}
ree {
background-color: black;
color: #0000ff;
font-size: 100%;
text-align: right;
}
body {
background-color: black;
}
<title>Story2</title>
<storytitle style="color:red;text-align:center">
THiS IS A TEST TITLE </br>
</storytitle>
<ree>
this is a test body
</ree>
Your basic problem is that you are not writing HTML.
Error recovery in browsers will create a storytitle element with some default styling that includes display: inline.
The text-align property does not apply to inline elements.
The solution is to write valid HTML. If you use an h1 element (all else being equal) it will not disappear and, being display: block by default, the text-align property will apply.
h1{
background-color:black;
font-color:#ff0000 ;
font-size:150%;
text-align:center;
}
p{
background-color:black;
color:#0000ff;
font-size:100%;
text-align:right;
}
body{
background-color:black;
}
<h1 style="color:red;text-align:center">THiS IS A TEST TITLE</h1>
<p>this is a test paragraph</p>
There are a lot of mistakes:
The HTML tags weren't valid HTML tags
I changed the tags to h1, h2 and p (headers and paragraph).
I assumed you wanted to use story, storytitle and ree as classes, so I did that for you in the code below.
The styling was redundant
on your "storytitle" you had the styles color: red and text-align: center, but they were already applied in your <style></style>
</br> is an end tag but doesn't exist, it's <br> and <br /> in HTML5.
The black background-color on your body was enough to give our page a black background. Applying the same color background to your elements is in this case unnecessary.
Here is the updated version with correct HTML and styling:
body {
background-color: black;
}
.title {
color: yellow;
text-align: center;
}
.storytitle {
color: #ff0000;
font-size: 150%;
text-align: center;
}
.ree {
color: #0000ff;
font-size: 100%;
text-align: right;
}
<h1 class="title">Story2</h1>
<h2 class="storytitle">
THIS IS A TEST TITLE
</h2>
<br />
<p class="ree">
this is a test body
</p>
Here is a picture of what I want changed to blue
here is my html and css code: https://jsbin.com/cofeweqaca/edit?html,css,output
Okay, weird stuff going on. When I created the jsbin to show you all my problem, the problem wasn't there. So my problem exists in sublime somehow. My problem is this: the space in between the 2 grey divs (the top is a jumbotron the bottom is not). Is supposed to be blue like it is in the jsbin. But in my sublime, when I open it up in Chrome, its white. Everything else is blue except that little stripe between the two divs.
I am VERY new to the web developer scene. So maybe someone wiser than me can explain the reason of this issue? Why is it white? Thanks!
Edit: Here is my code directly.
html {
font-family: 'Droid Sans', sans-serif;
}
#navb {
background: #3E474C;
}
#bs-example-navbar-collapse-1 ul li a {
color: white;
}
li:hover {} html {
background: #A5BCCC;
}
body {
background: #A5BCCC;
}
#rankjumbo {
margin-top: 100px;
height: 350px;
margin-bottom: 0;
}
.searchbox {
width: 50%;
margin: auto auto;
}
#text {
text-align: center;
font-family: 'Droid Sans', sans-serif;
}
#h1 {
font-family: 'Pacifico', cursive;
text-align: center;
padding-bottom: 30px;
}
#button {
background: #4B7795;
color: white;
font-family: 'Droid Sans', sans-serif;
}
.list {
height: 300px;
background: #eee;
margin-top: 30px;
}
<div id="rankjumbo" class="jumbotron">
<div class="container">
<div id="special">
<h1 id="h1">Rank.gg</h1>
<div class="searchbox">
<input id="text" class="form-control" type="text" placeholder="Enter your IGN...">
<button id="button" class="btn btn-default btn-block">See Where You Rank!</button>
</div>
</div>
</div>
</div>
<div class="list">
</div>
it because of the height inside of #rankjumbo and the blank div class "list" remove the css .list and make your #rankjumbo like this Live Fiddle
#rankjumbo{
margin-top:100px;
margin-bottom: 0;
}
I fixed it by moving the bootstrap link above my stylesheet in my html.
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..
I'm making a website and my text won't align to the center for the index-intro h1!
.index-intro {
width:100%;
background-color: #00C8FF;
height: 20px;
float:center;
}
.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
text-align:center;
display:inline-block;
}
<section>
<div class="index-intro">
<div class="wrapper">
<h1>Welcome to Anime!</h1>
</div>
</div>
</section>
And thanks :)
Here is a trimmed down set of HTML and CSS:
.index-intro {
background-color: #00C8FF;
text-align:center;
}
.index-intro h1 {
font-size: 15px;
text-transform: uppercase;
}
<div class="index-intro">
<div class="wrapper">
<h1>Welcome to Anime!</h1>
</div>
</div>
This aids the vertical alignment issues too, since you had fixed the height of the containing <div>. Although I guess you may have wanted that?
Here it is with some padding thrown in:
https://jsfiddle.net/9a3b4f7g/1/
Your Css is okay.
Just add this class in style tag
<style type="text/css">
.wrapper
{
text-align: center;
}
</style>
Please try following code snippet
.index-intro {
width:100%;
background-color: #00C8FF;
height: 20px;
text-align:center
}
.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
}
<section>
<div class="index-intro">
<div class="wrapper">
<h1>Welcome to Anime!</h1>
</div>
</div>
</section>
Believe it or not, you can do what you're looking for with just
.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
text-align:center; /*this makes the text go in the middle*/
display:inline-block;
width:100%;
background-color: #00C8FF; /*your bar color*/
padding-top:20px; /* this "fattens" the blue bar topside */
padding-bottom:20px; /* this "fattens" the blue bar bottomside */
}
What this basically does is, 'make a blue bar that fits 100% the window width, with text in the middle, fatten it top and bottom'. It's better to keep your CSS simple like this if you can. Keeps you from getting confused in the long run.
I want the "values" to be right-aligned. This is my HTML:
<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>
...and my CSS:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
}
.values {
color: white;
text-align:right;
display: inline-block;
}
What do I need to do to get the values to hug the right edge?
jsfiddle is here: http://jsfiddle.net/clayshannon/wvuQz/1/
Not sure if I understood your question correctly. But if you add a width then you can have the text right aligned to the box like below:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
width: 200px;
}
.values {
color: white;
text-align:right;
width: 100px;
display: inline-block;
}
Working Demo
Note: This is not for aligning the text to the right edge of the screen. This is for making the text within the .values element right align within the box.
You are using display: inline-block; which will make the element inline, it is no more a block level element, hence there is no space for the text to align to the left or to the right.
Just wrap the elements inside a div and than float the element to the right.
Demo
Also am using
.wrap {
overflow: hidden; /* This will clear floats */
}
For a better clearfix, you can also use the below snippet and call the class on parent element.
.clear:after {
clear: both;
display: table;
content: "";
}
You can also assign width to the .wrap here, so that elements stay inside boundaries.
A block parent container should have the text align to work. In your case it's the body, itself.. DEMO
body {
background-color: orange;
text-align:right;
}
Try this:)
.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
}
.values {
color: white;
text-align:right;
}
fiddle: http://jsfiddle.net/wvuQz/5/
The semantic approach:
<div>
<p class="blueBold">Existing Building</p>
<p class="values pull-right">19,322 sf</p>
</div>
<div>
<p class="blueBold">Acreage</p>
<p class="values pull-right">3</p>
</div>
CSS:
.pull-right {
float: right;
}
Demo: http://jsfiddle.net/wvuQz/7/
More Info:
http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/