I am trying to center two spans horizontally in a 150px div. I thought the simplest way of doing this world be to set the line-height of each of the spans to 150px, but for some reason, the text is not being centered when I try this method.
Here is my code:
HTML:
<div class="top">
<img src="/wp-content/themes/shipping/images/TV.png" />
<span class="cantstop">CAN'T STOP</span> <span class="shipping">Shipping</span>
</div>
CSS:
.top {
height: 150px;
padding: 10px 0;
}
.top img {
max-height: 100px;
padding: 0 10px;
}
.cantstop {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 150px;
font-size: 45px;
margin: auto 0;
text-shadow: 2px 2px 0px rgba(129,93,150,0.5);
}
.shipping {
font-family: 'Grand Hotel', cursive;
font-weight: normal;
font-size: 75px;
line-height: 150px;
margin: auto 0;
text-shadow: 4px 4px 0px rgba(217,144,178,1);
}
You can see the issue in action at cantstopshipping.com
Thank you for your time.
Add
.top img {
float:left;
}
.top span {
float:left;
}
and change
.cantstop,
.shipping {
line-height:130px;
}
The top container is actually 130px not 150px due to the padding on the top and bottom.
Hope my answer makes sense, let me know if it doesn't.
To align it vertically,
DEMO
Use vertical-align:middle
.top span {
vertical-align:middle
}
To align it horizontally,
DEMO*
Use .top { text-align:center }
Related
Whenever i give padding to text in div the whole height of div changes, and I have to manage the height according to div.
I have tried with this
its my html
<div>Home</div>
its the css i use
div {
font-size: 27px;
text-align: center;
margin: 5px 3px 0 0;
margin: 75px 0 0 0;
float: right;
width: 208px;
height:100px;
border-radius:2px;
font-family: "Comic Sans MS", cursive;
background-color: #F00;
color:#FFF;
}
Here, the text is on top while I want the text to be in centred. Can anybody help?
Use line-height: 100px; for center text
Demo Here
I am having trouble centering a div within its parent. I'd also like to make the child div auto fit its text content with a background colour applied. The child in question is #JoinSft-msg-block
here's my html:
<div id="JoinSubfooter">
<div id="JoinSubfooter-wrapper">
<div id="subft-line"></div>
<div id="JoinSft-msg-block">some text here</div>
</div>
Here's my CSS
#JoinSubfooter {
width: 100%;
height: 200px;
background: transparent url(../images/grey_body_noise.png);
clear: both;
/*Clears all columns and sets the footer at the bottom*/
}
#JoinSubfooter-wrapper {
width:981px;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
#JoinSft-msg-block {
display:inline-block;
padding: 10px 10px 10px 10px;
background-color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
margin: 0px auto;
}
Fiddle
If you are using an inline-block element, you can just apply text-align center to its parent;
i.e.
#JoinSubfooter-wrapper {
text-align:center;
width:981px;
margin: 0 auto;
padding: 10px 0px 10px 0px;
}
You could try this instead of display:inline-block; but not sure if it works in all browsers
display: table;
I am trying to create a div with left and right aligned text. The left text is a larger font that the right. I would like to have a margin (10px) to the left of the left text and to the right of the right text. What I am getting is:
+------------------------------+
| Right|
|Left |
+------------------------------+
Here is my HTML and CSS:
<div id='banner'>
<p class='align-left banner-text-large'>Left</p>
<p class='align-right banner-text-small'>Right</p>
</div>
#banner {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #702f7b;
clear: both;
}
.banner-text-large {
color: #ffffff;
font-family: 'arial';
font-size: 18px;
vertical-align: middle;
}
.banner-text-small {
color: #ffffff;
font-family: 'arial';
font-size: 14px;
vertical-align: middle;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
What am I doing wrong?
To have the p elements vertically-centered within their parent, simply set line-height equal to the height of the parent element. To have them also 10px away from the left, and right, sides of their parent set the padding-left and padding-right on that parent element.
That said, I'd suggest the following approach:
#banner {
/* above CSS unchanged */
box-sizing: border-box; /* forces the width of the element
to include the padding and border widths */
padding: 0 10px; /* sets the padding-top and padding-bottom to 0,
padding-left and padding-right to 10px */
}
#banner p {
margin: 0; /* overrides the browser default-margin */
padding: 0; /* overrides the browser default-padding */
line-height: 50px; /* forces the text to be vertically centred */
}
JS Fiddle demo.
It appears that you've not reset the default margin on the paragraph element
just add this to your css (and add the extra margins into the left and right aligned text):
p { margin: 0; }
here's a jsfiddle to help:
http://jsfiddle.net/benbroadley88/5C4Eb/
Edit: and your missing the ' as mentioned in one of the comments above.
Here you go:
<div id='banner'>
<p class='align-left banner-text-large'>Left</p>
<p class='align-right banner-text-small'>RIGHT</p>
</div>
body {
margin: 0;
padding: 0
}
#banner {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #702f7b;
clear: both;
}
.banner-text-large {
color: #ffffff;
font-family: 'arial';
font-size: 18px;
vertical-align: middle;
margin-left: 10px;
}
.banner-text-small {
color: #ffffff;
font-family: 'arial';
font-size: 14px;
vertical-align: middle;
margin-right: 10px;
}
.align-left {
float: left;
}
.align-right {
float: right;
}
The margin of <p> comes from broswer's style sheet.
Override the margin of p, and set line-height to the same value for both.
http://jsfiddle.net/wJyv2/1/
<div id='banner'>
<p class='align-left banner-text banner-text-large'>Left</p>
<p class='align-right banner-text banner-text-small'>RIGHT</p>
</div>
.banner-text {
margin: 15px 0;
line-height: 20px;
color: #ffffff;
font-family: 'arial';
}
.banner-text-large {
font-size: 18px;
}
.banner-text-small {
font-size: 14px;
}
I have a div #login_container and within that I have another div #login, and they both are within another div #block_2. With the border around the #login_container everything works as I wanted, but, when I removed its border, its child div (i.e. #login) lose its margin and all its text and other contents touch the #login_container. I am just learning html and css, please correct me if I am wrong and please help me how to let the #login div retain its margin. Thank you.
Without border around #login_container div:
With border around #login_container div:
Snippet of .html:
<div id="block_2">
<div id="login_container" class="div">
<div id="login">
<p>Email Address</p>
<input type="text">
<p>Password</p>
<input type="password">
<p>Password</p>
<input type="password">
<p><input type="checkbox" name="agreement">I have read and agree to the terms of service</input></p>
</div>
</div>
</div>
Snippet of .css:
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
width: 400px;
height: 400px;
margin: 0px 600px;
border-radius: 30px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
margin: 20px auto;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
margin: 10px;
color: white;
font-size: 20px;
}
http://jsbin.com/azudAzO/1/edit
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
position:relative;
left:600px;
width: 400px;
height: 400px;
border-radius: 30px;
padding:20px 35px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
color: white;
font-size: 20px;
}
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.