This question already has answers here:
How can I make a fieldset legend-style "background line" on heading text?
(9 answers)
Closed 5 years ago.
I have h3 and would like to have a line before/left and after/right DAY-BY-DAY word, but can only achieve line on the top and at the bottom of that word with ::after and ::before. How can I achieve this with flex, please help.
Something like ----DAY-BY-DAY----
Here is html:
<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>`
Here is CSS:
#daybyday::before {
content: "";
display: block;
background: salmon;
height: 5px;
}
#daybyday::after {
content: "";
display: block;
background: salmon;
height: 5px;
}
Do you want something like this?
So what we do here is, we create a div with color: salmon and height of 5px, then we set the flex property for the element using display:flex, by using flex property (align-items:center -> for vertical centering and justify-content:center -> for horizontal centering, we can get the h3 element in the center of the line, finally to prevent the div which is behind the h3 element from being visible, I set the background-color:white, so that it is not visible!
#daybyday {
display: inline;
background-color:white;
}
.text-special {
font-style: italic;
font-size: 23px;
color: #7B7B7A;
}
.line {
background-color: salmon;
height: 5px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
<div class="line">
<h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3>
<div>
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 2 years ago.
I am trying to make a page title header, in the middle of my webpage below my navigation bar, then I am trying to make the header border wrap close around the text of the header, so that there is not a lot of padding on the left and the right.
I am able to center the header, I am able to change the font, decoration, etc. of the header, but I cannot figure out why the width of the header cannot be manipulated without the header itself changing its position.
I have tried changing CSS code both in the parent div and the header child, but to no avail, nothing I try seems to work.
I have checked the console to see if some of the code I wrote didn't affect my elements, but the console showed that the code was affecting them.
Please show me where I'm making the mistake...
.title {
position: relative;
}
.title h1 {
display: flex;
justify-content: center;
position: static;
font-family: 'Prompt', sans-serif;
font-size: 40px;
color: white;
background-color: black;
border: 3px solid yellow;
border-radius: 10px;
}
<div class="title">
<h1>LOCATIONS</h1>
</div>
This is the code which centers the header, without messing up the position of the header on my page.
Move the flex properties to the child container (the h1 is centered within the title div that way) and define 100% width for it:
If you want some (black) space around the text and its border (top, left, right), use padding on the h1, similar as I did below
.title {
display: flex;
justify-content: center;
width: 100%;
}
.title h1 {
font-family: 'Prompt', sans-serif;
font-size: 40px;
color: white;
background-color: black;
border: 3px solid yellow;
border-radius: 10px;
padding: 6px 4px 0;
}
<div class="title">
<h1>LOCATIONS</h1>
</div>
This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
I am currently practicing CSS by following along with a Youtube tutorial by freecodecamp.org
My code is as follows:
p::before{
content: "hello ";
color: white;
font-size: 60px;
background: salmon;
margin-bottom: 20px;
}
p::after{
display: block;
content: "";
height: 100px;
width: 100px;
background: green;
}
<p>Before and after pseudo elements</p>
Now when I specify display: block in the p:: after pseudo-selector I am getting the expected output as follows
but when I omit the display: block property, the green box just disappears as below:
Does someone have an appropriate explanation for why this happens? What I was expecting was that the box will still be shown inline after the 'hello before and after pseudo-elements' but it is disappearing altogether...
Thanks in Advance for the help.
Kind Regards,
Sohaib
Then use display: inline-block
Elements with display: inline can't have explicit dimensions set on them - it will have no effect. And so, because the pseudo element has no non-empty content, it will appear with 0 dimensions and thus invisible.
Add display: inline-block; to your CSS
p::before{
content: "hello ";
color: white;
font-size: 60px;
background: salmon;
margin-bottom: 20px;
}
p::after{
display: inline-block;
content: "";
height: 100px;
width: 100px;
background: green;
}
<p>Before and after pseudo elements</p>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I have two different paragraph tags, each with a different size. The problem is that I want the two texts to move to the center of the text line, so they appear even. Below is my current code, and images of desired results. Note that these are separate tags, using display: inline to make the appear next to each other.
Example of current code
.big {
font-size: 42px;
display: inline;
}
.small {
font-size: 12px;
display: inline;
}
<p class="big">Test</p>
<p class="small">Test</p>
Desired Result
Current Result
Wrap it in a container element and give vertical-align: middle; like this
.container p {
display: inline;
vertical-align: middle;
}
.big {
font-size: 42px;
}
.small {
font-size: 12px;
}
<div class="container">
<p class="big">Test</p>
<p class="small">Test</p>
</div>
.big {
font-size: 42px;
display: inline;
}
.small {
font-size: 12px;
display: inline;
position: absolute;
padding: 8px 8px;
}
well while providing absolute positioning to the text of the .small class the position of the text moves to top
this might help you, also you can change the padding of according to the font-size
Set width to the text-box as you want. As I used display-block. You have to set display: inline-block to set the width of the text-box.
.text-box {
display: block;
text-align: center;
}
.big {
font-size: 42px;
display: inline;
}
.small {
font-size: 12px;
display: inline;
}
<div class="text-box">
<p class="big">Test</p>
<p class="small">Test</p>
</div>
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;
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
How to center a flex container but left-align flex items
(9 answers)
Closed 5 years ago.
Given the following example...
/* Custom reset */
html {
margin: 20px 0;
}
body {
margin: 0 50px;
}
h1 {
margin: 0;
}
/* Problem code */
h1 {
background-color: lightblue;
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
h1::before,
h1::after {
background-color: purple;
content: "";
display: inline-block;
flex: 1 0 auto;
height: 3px;
}
h1::before {
margin-left: -50px;
}
h1::after {
margin-right: -50px;
}
h1>span {
background-color: lightpink;
flex: 0 1 auto;
padding: 0 20px;
}
<h1>
<span>Fooooooooooo & Baaaaaaaaaar</span>
</h1>
When you run the snippet you'll notice a pink box with wrapped text (because it doesn't fit all in one line) and purple lines on the sides, like this:
And this is how it looks when the text doesn't wrap (which is OK and it's what I want):
In the first image there's too much space between the text and the purple lines and I need it to be only 20px, like the second image.
In other "words", I'm looking to achieve this:
(simulated image)
It goes without saying that I need this to work with dynamic content (the text could be anything, have any number of words, short or long). I also need the text to be in a single line if it fits, otherwise multiline and always with 20px max between the purple lines and the text.
If I understand your end goal correctly, you could simply set a fixed width on the <span>. This will ensure that there's the desired amount of 'margin' around the pink box, and it will also work with variable content; if there's too much content to display on the one line, it will simply create more lines. Because the new lines are also constrained by the fixed width, the pink box will still retain the same amount of 'margin':
/* Custom reset */
html {
margin: 20px 0;
}
body {
margin: 0 50px;
}
h1 {
margin: 0;
}
div+div {
margin-top: 20px;
}
/* Problem code */
h1 {
background-color: lightblue;
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
h1::before,
h1::after {
background-color: purple;
content: "";
display: inline-block;
flex: 1 0 auto;
height: 3px;
}
h1::before {
margin-left: -50px;
}
h1::after {
margin-right: -50px;
}
h1>span {
background-color: lightpink;
flex: 0 1 auto;
padding: 0 20px;
width: 350px;
}
<h1>
<span>Fooooooooooo & Baaaaaaaaaar</span>
</h1>
Obviously the value you would need for the fixed width would depend on the context, but 350px works pretty well for your example.