This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 4 years ago.
I have a link that looks like a button and I would like to set the background colour to be different.
However, I don't understand why my holder div does not take the same height as it's child. I doesn't take into consideration padding.
Is there a clean way to fix this?
.link {
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
You need to add display: inline-block to your .link element:
.link {
background-color: green;
padding: .9rem 3rem;
display: inline-block;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
By default, <a> elements are display: inline, and do not have their layout impacted by the containing block. That is to say, they do not allow for a height or width to be set, and do not respect vertical padding and margins.
The <a> tag default display is inline, so its parent will display it vertically along its line box (based on the vertical-align property), you need to change it to display: block or inline-block, depending on what you’re looking for;
.link {
display: block;
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
Because by default a tag will have the property of display: inline; so make sure to change the anchor tag to display: inline-block; or display: block;
Related
I'm having trouble vertically centering 2 elements (svg + text). I used flexbox to center these elements, and they are perfectly centered if I do not precise any font-size. But when I put a smaller font-size on the text (0.8em instead of 1em), it creates a small space on top of the text instead of centering it. Horrible colors are to show the blue space on top of the text. Does anyone know how to fix this ?
I've already tried adding text-align: center; vertical-align: middle;
The parent div (blue) centers elements with flex: display: flex; align-items: center;
Thanks a lot
Edit: Here is a snippet, I somehow can't find how to link a file (the svg) ?
a {
text-decoration: none;
}
/*Parent div*/
.parent {
width: 20vw;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1vw;
background-color:skyblue;
}
/*Svg*/
.parent img {
width: auto;
height: 3vh;
margin-right: 10px;
background-color: rosybrown;
}
/*Text*/
span {
font-size: 0.8em;
background-color: seagreen;
}
<div class="parent">
<div>
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"><span>Favoris</span>
</div>
</div>
I would try to set the line-height of the text element to the same value as your font-size. I would also not define a height for the text element (I am not sure if you are doing this or not, since you did not provide your code).
So something of the sort:
div.container {
display: flex;
align-items: center;
padding: 10px;
background-color: #4169E1;
}
div.container img {
width: 40px;
height: 40px;
margin-right: 20px;
background-color: #BC8F8F;
}
div.container span {
font-size: 20px;
line-height: 20px;
color: #4B565C;
background-color: #2E8B57;
}
<div class="container">
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"/>
<span>Favoris</span>
</div>
Found the problem:
<a href="#">
<div class="parent">
<img src="img/coeur.svg">
<span>Favoris</span>
</div>
</a>
I just had to invert the <a> tag and <div> and everything is well centered.
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 4 years ago.
When content in a box wraps, the width of that box extends to fill up all available space. Is there a way to have the width of the box be its "effective visible size"?
Here's code and a codepen to try:
div {
display: flex;
align-items: center;
justify-content: center;
width: 17rem;
}
span {
border-bottom: 1px solid #444;
text-align: center;
font-size:29px;
}
<div>
<span>
Helloworld this willwrap
</span>
</div>
https://codepen.io/rasteiner/pen/aXKwdZ?editors=1100#0
I'd like to have the border-bottom be only as wide as the widest text line.
Using a <br> tag is not an option.
I could set width: min-content on the span, but that would make the text wrap more than necessary.
In your js fiddle just give you span a width inside of the div.
<div>
<div class="myClass">
<span>
Hello world this will wrap
</span>
<div>
</div>
and here is the css
body {
font-size: 3rem;
}
.myClass {
height: 16rem;
width: 30%;
background-color: #dedede;
display: flex;
align-items: center;
justify-content: center;
margin: 2rem;
}
.myClass span {
width: 50%;
border-bottom: 1px solid #444;
text-align: center;
}
I have a div containing two label elements. Each label should be on a side of the div. As labels are inline elements, I have tried with display: block and also with display: inline-block for margins to take effect, but the result is not the expected one.
div {
color: #ffffff;
background-color: #3f3f3f;
}
label:nth-of-type(1) {
margin-left: 5px;
}
label:nth-of-type(2) {
display: block;
<!-- display: inline-block; -->
margin-right: 5px;
margin-left: auto;
}
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
As you can see with the code execution, the second label is not respecting the margins and is being displayed underneath the first one.
The label must have a width and display:block to work with margin auto.
Today it's more flexibel to use flexbox for this.
div {
color: #ffffff;
background-color: #3f3f3f;
display:flex;
flex-flow: row nowrap;
justify-content: space-between;
}
label:nth-of-type(1) {
margin-left: 5px;
}
label:nth-of-type(2) {
margin-right: 5px;
}
<html>
<body>
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
</body>
</html>
With more modern methods like CSS Grid or Flexbox, this can be accomplished. But my solution will be with raw CSS to keep at a similar level to OP's code.
Both labels will need to have display: inline-block applied to get both elements to be treated like block elements and remain on the same line. You'll also need to set a width to give them a container to work with when adjusting the text placement. For this example, we'll do width: 50%.
Note: inline-block elements that take up a full width: 100% will result in the labels being on separate lines unless you modify the html to remove the whitespace in between the elements. Read more why on this behavior here and a personal CodeSandbox of fixing this.
You'll notice I also removed margin-left and margin-right from the width calculation and instead used padding to result in the same spacing on the left and right.
HTML:
<body>
<div>
<!-- Remove whitespace between labels to not exceed width: 100% -->
<label>Left side label</label><label>right side label</label>
</div>
</body>
CSS:
div {
color: #ffffff;
background-color: #3f3f3f;
padding: 0 5px;
}
label {
display: inline-block;
width: 50%;
}
label:nth-of-type(1) {
text-align: left; /* Not necessary, but you can explicitly set the behavior you want. */
}
label:nth-of-type(2) {
text-align: right;
}
Codepen
you don't need to specify the display property, just let it be inline and play around with the float property to float them.
<style>
div {
color: #ffffff;
background-color: #3f3f3f;
display: block;
height: 20px;
width: 100%;
}
label:nth-of-type(1) {
margin-left: 5px;
float: left;
}
label:nth-of-type(2) {
float: right;
margin-right: 5px;
}
</style>
<html>
<body>
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
</body>
</html>
I want to center a DIV within a parent DIV. I have tried using the recommende dsolution on SO -- How to horizontally center a <div> in another <div>?, but its not centering it. The basic layout is this
#revealScoreMobile {
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
.stats {
text-align: center;
width: 100%;
background-color: red;
margin: 0 auto;
}
<div id="revealScoreMobile">
...
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
and yet as you can see from the Fiddle -- https://jsfiddle.net/5Lgu0uw3/2/, the child DIV is not centering within the parent, despite the fact I have
text-align:center;
in there. What gives? What else do I need to do to center that DIV within its parent?
I am not completely sure what you want, but if you want the inner DIV NOT have the full width, but only as much as its text contents require, make it an inline-block and erase the widthsetting (or give it a widthsetting less than 100%). inline-blocks are affected by text-align: center
(note that I erased some superfluous settings, but put the ... content into its own DIV, since it otherwise would be on one line with the subsequent inline-block.
#revealScoreMobile {
padding: 10px;
text-align: center;
}
.stats {
display: inline-block;
text-align: center;
background-color: red;
}
<div id="revealScoreMobile">
<div> ... </div>
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
As others have suggested in the comments, text-align: center; only applies to text content, not the inner div.
Your CSS applies width: 100%; to .stats which is forcing it to take up the full width of it's parent container #revealScoreMobile, which is also width: 100%;. Secondly it needs display: inline-block; to override the previous display: table-cell; as present in your jsfiddle example.
Replace in your CSS:
.stats {
display: inline-block;
text-align: center;
background-color: red;
margin: 0 auto;
}
This is my code but I want the text to only have background color behind it, and not stretch across the entire screen? Any ideas?
.section_title {
background-color: orange;
text-align: center;
margin: 0px auto;
}
HTML is
<div class="col-md-12">
<div class="section_title">
<h2>Choose a Pack to Print</h2>
</div>
</div>
An option is adding display: inline-block; to the CSS of the text element.
One problem I found with display: inline-block; is it clears floats incorrectly. Instead, I use width: fit-content;
.highlight {
background: yellow;
padding: 0.5em;
width: fit-content;
}
<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>
There's a few ways to do this, but probably the best way is to make the h2 inline or inline-block.
Using inline-block will allow you to set width/height.
.section-title {
text-align: center;
}
.section-title h2 {
display: inline-block;
}
The other way to do this is to set a width on the h2 and set the margin to auto;
.section-title h2 {
margin-left: auto;
margin-right: auto;
width: 50%; /* for example */
}
If you want all your headings to be a set width, I'd choose the second one (allowing for text to wrap). If you want the box to be flexible and hug the contents, I'd use the first.