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
Related
I have an a element which has a css rule : display: inline-block; (this css rules should not be changed), and inside this a element I have a span which I want to center vertically, and I want the height of the span element to be equal to the height of it's content.
<a class="anchor" href="#">
Fonctionnalite 2
<span class="label">Lecture</span>
</a>
This is what I tried :
.anchor {
background: #38bcfc;
border-radius: 2px;
box-shadow: inset 0 0 1px #999999;
line-height: 40px;
height: 40px;
display: inline-block;
color: black;
white-space: nowrap;
padding: 0 4px 0 1px;
margin: 0;
vertical-align: top;
color: #FFF;
}
.label{
float: right;
margin-left: 30px;
color: white;
border-radius: 0;
text-shadow: none;
font-size: 11px;
font-weight: normal;
padding: 0 3px 0 3px;
background-color: #abbac3!important;
display: inline-block;
}
And this is a demo in jsfiddle:
https://jsfiddle.net/d3zyfv86/1/
How can I solve this ?
If you want the label to have height of its content, you have to set its line-height because currently it inherits from the anchor.
Additionally, you need to create a container for the text to position it vertically. So, I now use your label as a container and have another span as label-text.
The fix might be: https://jsfiddle.net/d3zyfv86/3/
The question doesnt make much sence
but if you update the height of the span to 1.5em so then you can center it by removing float: right and adding vertical-align: center https://jsfiddle.net/d3zyfv86/2/
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 }
I can't seem to centre an image inside of a div.
the image not centered is the "quotimg" which is inside of the div quotejd which is inside of div head.
Currently learning some css and html (not supposed to use html5 elements)
HTML
<div class="head">
<div class="quotejd">
<img id="quoteimg" src="pictures/quotes/jd.png">
<p id="quote">“The only creatures that are evolved enough to convey pure love<br> are dogs and infants.”</p>
</div>
</div>
CSS
.Head {
background-image: url('pictures/dogwallpaper1.png');
background-repeat: no-repeat;
background-size: cover;
height: 550;
text-align: center;
margin: 0 auto;
}
.quotejd {
margin: 0 auto;
text-align: center;
}
#quoteimg {
width: 5em;
margin: 0 auto;
text-align: center;
display: block;
float: none;
}
#quote {
font-size: 1.8em;
line-height: 1em;
margin: 0 auto;
text-shadow: 0px 0px 5px rgba(57,57,57,1);
font-family: 'Nixie One', cursive;
text-align: center;
color: #ffffff;
}
This tripped me up when I was learning CSS too. Try setting the div surrounding your image (with the class .quotejd) to a set width (i.e. width:960px). The auto value of margin doesn't know how to center it otherwise.
I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV
I'm trying to create something like yahoo.com where the content is in the middle and on the outskirts there's a grey margin (or at least something looking like a margin, not sure if it's padding). I was successful, however when the page is resized by the user I want this margin to decrease just like it is on yahoo.com but its not decreasing (go to www.yahoo.com and resize the page and their margin decreases). Anyone knows how to get this margin to decrease?
body
{
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 0px;
margin-bottom: 0px;
min-width: 650px;
min-height: 685px;
color: #00008B;
}
table
{
margin:0;
padding: 0px 2px;
border-spacing: 0; /* remove the spacing between the borders. */
width: 950px;
height: 685px;
background-color: #C1CDC1;
}
The trick is to create a container div of fixed width within your body tag for the content and set the margin to auto.
body {
text-align: center;
}
div#container {
width: 960px;
text-align: left;
margin: 0 auto
}
May I also recommend firebug or something alike as a useful tool to inspect, among other this, css and html of websites?
Change your body style to:
body {
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin: 0px auto 0px auto;
width: 650px;
min-height: 685px;
color: #00008B;
}