I am using the css line-height propriety to position the :beforetext of the li element vertically in the middle of it's border as you can see in the snippet. My problem is that I want it to stay at the middle if the font size changed (for example if the user used the zoom text only functionality of the firefox browser). I thought of using line-height: calc(1 / 2em) but this wouldn't work since the / operator accepts only a number at the right side. here is my code
li {
list-style-type: none;
width: 20%;
float: left;
font-size: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
color: purple;
}
li:before {
width: 40px;
height: 40px;
border: 4px solid purple;
content: counter(step);
counter-increment: step;
line-height: 40px;
font-size: 15px;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
}
<ul>
<li> element</li>
<li> element</li>
<li> element</li>
<ul>
you can use flexbox to align items inside your li which I think is a better solution than line-height
Try :
display: flex;
align-items: center;
justify-content: center;
in your li:before and remove the line-height. I think you will get the desired result.
Hope this helps
Related
I have this button I am trying to make, but I am unable to get the text to be centered. I have previously looked at what past people have answered on how to align text within a button, but the ones I have tried do not seem to work.
.btn1 {
width: 160px;
height: 40px;
align-items: center;
text-align: center;
display: inline;
border-radius: 60px;
background-color: white;
border-color: #05434a;
border-width: 3px;
box-shadow: 5px 6px #05434a;
text-transform: uppercase;
font-size: 1.7vh;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
font-family: poppins;
padding: 0px;
}
.nd {
text-decoration: none;
}
.social-link {
text-align: center;
margin-top: 20px;
margin-bottom: 0 !important;
}
<div class="social-link">
<a class = "nd" href = "">
<button class="btn1">
<p>text</p>
</button></a>
</div>
While one thing that seems OK is centering of the text, your HTML has these problems:
Error: The element button must not appear as a descendant of the a
element.
Error: Element p not allowed as child of element button in this
context
So this snippet removes these two elements and moves the CSS button styling onto the anchor element. It makes this inline-flex to help center the text.
Note: the text is centered though it can sort of appear as if it's a bit high because of the visual strength of the shadow. This snippet puts a 1px width border on the element just so you can assure yourself the text is centered.
.btn1 {
width: 160px;
height: 40px;
align-items: center;
justify-content: center;
text-align: center;
display: inline-flex;
border-radius: 60px;
background-color: white;
border-color: #05434a;
border-width: 1px;
border-style: solid;
box-shadow: 5px 6px #05434a;
text-transform: uppercase;
font-size: 1.7vh;
margin-left: auto;
margin-right: auto;
font-family: poppins;
padding: 0px;
}
.nd {
text-decoration: none;
}
.social-link {
text-align: center;
margin-top: 20px;
margin-bottom: 0 !important;
}
<div class="social-link">
<a class="nd btn1" href="">
text
</a>
</div>
Well, pretty easy and always works:
display: flex;
justify-contect: center;
align-item: center;
that will get the job done
for the element, set:
text-align: center;
I'm trying to do a tab header, its a list of the titles, sometimes the titles are too long and has "-" in between. So to save space I add br to breakline.
1/The problem is the distance up & down between the "-" symbols is too big, is there any way I can fix that?
is this a correct way to do it by set br tag or should I set max-width for each li for the breakline?
This is my codepen
<div>
<ul>
<li>Real Estate, <br> Building House</li>
<li>Distribution <br>–<br> Manufacturing</li>
<li>Media <br>–<br> Broadway theater</li>
<li>Singer <br>–<br> dancer</li>
<li>Real Estate</li>
<li>Construction</li>
</ul>
div {width: 80%; margin: 0 auto;}
ul {
list-style: none;
/* display: table; */
width: 100%;
padding: 0;
margin: 0;
}
ul li {
position: relative;
font-size: 1.4rem;
/* display: table-cell; */
color: blue;
text-align: center;
display: inline-block;
margin-right: 20px;
}
Hope this helps you:
ul li {
font-size: 1.4rem;
color: red;
max-width: 120px;
padding: 10px;
vertical-align: middle;
text-align: center;
/* padding: 0 5px; */
display: inline-block;
margin-right: 14px;
}
Updated codepen
I've created a navigation using the CSS below to achieve equal distance between the nav elements. However, I've run into an issue where the ::after element creates empty space below the list area, the height of which I cannot seem to adjust.
See this image:
Rendered List with wasted space
ul.formnav {
padding: 0px 8%;
justify-content: space-between;
text-align: justify;
}
ul.formnav::after {
background-color: red;
content: 'This is wasted Space';
display: inline-block;
width: 100%;
height
}
ul.formnav li {
display: inline-block;
color: #FFF;
background-color: #999; /*Circle Formatting*/
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
}
<div>
<ul class="formnav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
I can adjust the contents themselves, e.g. I can set height:0px and the red background will disappear or simply set content:''; but the space taken up by the ::after element remains unchanged. Any idea how to fix this without dropping display:inline-block ? (can't use flexbox due to compatibility)
The extra white space that appears is due to the pseudo-element forming a line box in the new line, and the vertical spacing is the line leading divided above and below the baseline.
If you set line-height: 0 on the parent container and then vertical-align: top on the pseudo-element, this will get shrink the white space to zero height.
ul.formnav {
padding: 0px 8%;
justify-content: space-between;
text-align: justify;
border: 1px dotted blue; /* demo only */
line-height: 0;
}
ul.formnav::after {
content: '';
display: inline-block;
width: 100%;
vertical-align: top; /* gets rid of space below the baseline */
}
ul.formnav li {
display: inline-block;
color: #FFF;
background-color: #999; /*Circle Formatting*/
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
}
<div>
<ul class="formnav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
Or you could just use flexbox:
ul.formnav {
padding: 0px;
display: flex;
justify-content: space-between;
border: 1px solid grey;
}
ul.formnav li {
color: #FFF;
background-color: #999;
/*Circle Formatting*/
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
}
<div>
<ul class="formnav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
The div (#second) is spilling beyond its li container for height: 2em; Only way I can see it happen is due to some mysterious padding within the li. But why ? Using reset.css (say, by Eric Meyer) doesn't seem to make any difference either. Please help. (For height: 1em, there is no problem.)
Here is http://jsfiddle.net/d84e5/
CSS:
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 2em;
}
HTML:
<ul>
<li>first</li><!--
--><li><div id="second"></div></li><!--
--><li>third</li><!--
--><li>fourth</li><!--
--><li>fifth</li>
</ul>
This is because when you use display: inline-block your baseline will be in the middle. You can align the element in the middle of the baseline with:
vertical-align: middle;
jsFiddle
Adding vertical-align:top; solves the issue (or use middle if you want to align the div in the vertical center).
jsfiddle
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 2em;
vertical-align: top;
}
The content starts from the middle of the li, as the div is taller than the li it pushes the top of the li.
Fix:
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
background-color: #000;
width: 50px;
height: 1.85em;
}
It's basing itself off of the line-height.. not padding or margin. Lower the height to 1.8em or bring down the line-height of the li.
I have a series of buttons that I need to have text and a chevron with a different class.
The text and the chevron both need to be centered vertically and horizontally within the container and be able to expand and contract based on the number of the characters.
Additionally I need the chevron to always be flush against the text with a 10px left padding.
I'm having difficulty centering the text and arrow.
Thanks for your help!
section {
margin:2px;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
}
.cta-text{
float:left;
text-align: center;
}
.arrow-lm{
float: left;
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
top: -11px;
}
Here's the fiddle
http://jsfiddle.net/ebjrc/1/
Not sure if this is what you mean, but I would use the flexible box model.
section {
margin:2px;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.cta {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
}
.cta, .cta-text{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.arrow-lm{
font-size: 40px;
margin-top: 10px;
padding-left: 10px;
position: relative;
}
Let me know if this is what you need.
-- EDIT
jsFiddle here
Cheers!
I think your approach is much more complicaded as needed, if i understanded you correctly.
Remember that every anchor element can also have a layout. Why would you place a anchor and give a div inside it propties of layout when the anchor itself could have those propeties. This way you can use less elements in your code.
<div class="campaign-1">
<a href="#" class="submit">
Tune In
<span> > </span>
</a>
</div>
You can give you span a additional class if you need to edit it somewhere in your code, which i'm not aware of.
Now also this reduces your css code:
div {
background-color: #8dc63f;
color: #fff;
font-size: 40px;
margin: 0 auto;
padding: 40px;
text-transform: uppercase;
width: 300px;
text-align: center;
margin: .5em;
}
div a
{
color: white;
}
That's actually all you need.
jsFiddle