I have a footer and I set all margin and padding to be zero at the start. When I want to set my footer to text-align: center , nothing changed formy .footer p.
However the padding is still 0 horizontally, not 9px vertically.
.footer{
background-image: url("../img/naviga.png");
width: 1000px;
height: 30px;
/* my div settings */
background-repeat: repeat-y;
font-weight: bold;
text-align: center;
/* my div settings */
font-family: verdana, arial, sans-serif;
font-size: 10px;
}
/* p tag is my footer text */
.footer p{
padding: 9px auto 9px auto;
}
[have a look plz][1]
[1]: http://i.stack.imgur.com/D77IT.png */
Why this override is not working? I also tried with !important.
You can`t use auto at padding.
Try it for css :
.footer p {
padding: 9px 0px;
}
and don't miss your footer height is set to 30 px. You could resize it or p will get out .footer
Check link : https://jsfiddle.net/L5p38nc3/1/
You cannot do padding: 9px auto because auto is an invalid property for padding. That's why property is lined-through in the picture you provided.
Check the MDN docs for padding, here.
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Here's one of a few ways to vertically and horizontally align your text in the middle. Check this fiddle or the snippet below.
.footer {
display: table;
background: red;
width: 1000px;
height: 30px;
background-repeat: repeat-y;
font-weight: bold;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 10px;
}
.footer p {
display: table-cell;
vertical-align: middle;
}
<div class="footer">
<p>
text
</p>
</div>
Related
I'm trying to display an image in an icon next to a piece of text. It sits slightly below the text and I'd like it to at least be the same height as the text aka vertically aligned to the middle.
.text {
font-family: 'Roboto', sans-serif;
font-size: 20px;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
color: black;
}
.em-image{
background-image: url(https://i.imgur.com/r8hkG1o.png);
}
[class^="em-"], [class*=" em-"], .em-png {
height: 1em;
width: 1em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
}
<p class="text"><i class="em-image"></i> Name</p>
It's currently looking like this
Whereas I'd prefer it to look like this
Is there a way to at least make the image match the line height? The image sits at the bottom now but I'd like it the full height and aligned vertically to the text, I'm just not sure how to go about this, could the same be done with a span or a DIV containing the image as a background instead?
I Suggest that use vertical-align:baseline and use 'rem' instead 'em' that should work.
.text {
font-family: 'Roboto', sans-serif;
font-size: 2.5rem;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
color: black;
}
.em-image{
background-image: url(https://i.imgur.com/r8hkG1o.png);
}
[class^="em-"], [class*=" em-"], .em-png {
height: 2rem;
width: 2rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: baseline;
}
<p class="text"><i class="em-image"></i> Name</p>
I would use Flexbox and <span> instead of <p> to achieve this. With the Flexbox approach you can center all the items horizontally and vertically.
Why <span>? Because it is a generic inline container for phrasing content, which does not inherently represent anything.
.wrapper {
display: flex;
align-items: center;
font-family: 'Roboto', sans-serif;
font-size: 75px;
line-height: 1;
}
span {
margin: 0 0 0 .25em;
}
.em-image {
background-image: url(https://i.imgur.com/r8hkG1o.png);
height: 1em; /* Change this value to match the desired height */
width: 1em; /* Change this value to match the desired width */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
<div class="wrapper">
<i class="em-image"></i>
<span>Name</span>
</div>
Simply, Try to find the height of the text and make max height to the icon equal to the height of the text
you may try to add this CSS code:
[class^="em-"], [class*=" em-"], .em-png {
max-height: 200px;
}
if the icon is larger smaller than the text height try to increase or decrease the icon height
i hop this answer helps
My suggestion is to use inline-flex to the class .text (instead of inline-block)
then you can just give the icon a align-self: center and it should be what you are looking for. You will probably need to adjust the spacing but should be good.
.text {
display: inline-flex;
}
[class^="em-"] {
align-self: center;
}
I'd suggest several things:
Use "em", as you were doing. "rem" will take the root font-size, and will break the component if that changes, while "em" will keep the image size proportional to the label text.
Use flexbox. It's shorter, more clear and modern.
No font actually occupies the whole vertical space. There is some extra space above and bellow. The typography you are using, Roboto, occupies approximately 80% of the vertical space, so that should be reflected in your css if want to be really precise.
Optional: the font is also not exactly centered, it has slightly more space bellow than above, so you'll need to correct this, by a factor of 2%.
The final code would be:
.text {
font-family: 'Roboto', sans-serif;
font-size: 20px;
display: flex;
align-items: center;
}
.em-image{
background-image: url(https://i.imgur.com/r8hkG1o.png);
}
[class^="em-"], [class*=" em-"], .em-png {
height: .8em;
width: .8em;
background-position: center;
background-size: contain;
margin-right: .25em;
margin-top: -.02em;
}
<p class="text"><i class="em-image"></i> Name</p>
I currently have a text-align: center; h1 element. It also has a background-color: #000506;. The current issue is that this background color fills the whole line as shown here:
What I want it to do is to only fill the area where the text is. The only way I've been able to do this is making the left and right margins really large, and even then it's not perfect.
margin-left: 600px;
margin-right: 600px;
you can reset display to use the table-layout model so it will shrink to fit content.
example
h1 {
display: table;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
theoraticly and very soon, display won't be needed, width and margin:auto will do fine when max-content will be widely implemented.
h1 {
width:max-content;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
https://developer.mozilla.org/en-US/docs/Web/CSS/width#fill
max-content
The intrinsic preferred width.
I've seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be 'unhelpful' in the future even though google whips up a nice result summing some 55,000+ relevant results.
So, why won't padding-right work with a parent, and text-align right child?
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
}
The HTML
<div id="rightc">
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
</div>
Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code.
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
background-position: center right;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
cursor: pointer;
}
Live example
I think I understand your confusion.
What (I think) you're asking is why when you add padding to the left, it moves the content, but not when you add it to the right.
The answer is that padding makes the width of the div grow. So when everything is to the left (padding and text-align), the div gets wider and and the content is moved.
But when everything is to the right (padding and text-align) nothing moves...right? Wrong.
The div grows to the right the correct number of pixels adding the padding. And the content stays where it is because the offset is happening AFTER the content, not before like when you left align. It's easy to visualize with a border added.
Here is the code with no padding
http://jsfiddle.net/z5PJx/1/
You can see that the text is right up on the edge.
Here is the same code with padding-right: 50px;
http://jsfiddle.net/z5PJx/2/
Two things happened.
The div grew by 50px;
The content was moved left by 50px;
Those changes offset, and the content doesn't move.
In both situation the div's width grows to the right. But the direction of the padding changes.
Try this, on the container holding your text
.rightctext{ box-sizing: border-box; padding-right:10px;}
The box-sizing property will force the container object to take the padding on the right into account.
Hopefully that's what you're looking to achieve. *Note, adjust the px accordingly.
I'm trying to align the text in a h1 vertically to the middle, seeing as the text might wrap it needs to look nice whether it's 1 line or 2.
This is the css I use:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
The html is quite simply:
<h1>title</h1>
No matter what value I enter for vertical-align, the text is always at the top of the h1 element.
Am I miss-understanding the vertical-align property?
No CSS hacks needed. If I understand you correctly, then you can use this CSS:
h1 {
font-size: 12pt;
line-height: 10px;
padding: 10px 0;
}
See demo fiddle which equals a minimum height of 30px;
A note about vertical-align: that style only works in conjunction with - and is calculated with regard to - the line-height style. So setting line-height at 10px, putting text with height 12pt leaves no space to align at all. But setting line-height to 30px would result in too much space between more lines of text. This shows a trick for vertical aligning several lines of text, but that is only needed when you have a fixed height container. In this case the container's height (the h1 element) is fluid, so you can use this simple padding solution.
I dont know about vertical align, but if you add height property and set height and line-height properties same you get the vertical align: center effect
h1
{
font-size: 12pt;
line-height: 50px;
height: 50px;
}
Center the H1 title using flexbox align items center and justify content center, see this example:
div {
padding: 1em;
border: 1px dashed purple;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div>
<h1>Center this h1</h1>
</div>
Just add a float property and use padding-top: 50% for example:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
position: absolute;
float: center; /* If you want it to be centered */
padding-top: 50%;
}
I used a CSS custom property (variable) and calc
:root {
--header-height: 100px;
}
* {
margin: 0;
padding: 0;
}
header {
font-size: 16px;
height: var(--header-height);
justify-content: space-evenly;
display: flex;
border-bottom: 1px solid #000;
}
h1,i {
font-size: 1.2rem;
display: inline-block;
padding-top: calc(var(--header-height) - 1.2rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
<img src="https://placekitten.com/100/100" alt="logo" height="100">
<h1>
Kitten Stories
</h1>
<i class="fas fa-lock"></i>
</header>
I have a page with one div and 1 H1 tag in the div;
I am giving a margin to a H1 and it's giving the margin the the entire div
Why is this?
http://craveadeal.com/indexV2.php
Here is the entire code:
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
#wrapper {
margin-right: auto;
margin-left: auto;
background-image: url(image-files/mockupV2.jpg);
background-repeat: no-repeat;
height: 555px;
width: 1040px;
background-position: center top;
}
#wrapper h1 {
text-align: center;
font-size: 72px;
font-family: "Comic Sans MS", cursive;
text-decoration: blink;
color: #F07D00;
background-color: #000;
margin-right: 125px;
margin-left: 125px;
display: block;
margin-top: 125px;
}
-->
</style>
</head>
<body>
<div id="wrapper"><h1>COMING SOON</h1>
</div>
</body>
Just add a overflow:hidden to the #wrapper
That should work.
The Problem
It's being caused by margin collapse:
"In this specification, the expression
collapsing margins means that
adjoining margins of two or more boxes
combine to form a single margin."
Or more simply:
when the vertical margins of two
elements are touching, only the margin
of the element with the largest margin
value will be honored, while the
margin of the element with the smaller
margin value will be collapsed to
zero.
The Solution
You can fix it by:
Adding vertical padding to your #wrapper.
Adding a border to your #wrapper.
Floating your <h1>.