The text-align (center) property isn't properly working for my text.
I have the following code:
<span class="info"> i <span id="uitleg_itje">Bla bla.
</span></span>
And the css for the info class is:
.info {
font-weight: bold;
text-align: center;
background-color: #C73C3C;
-moz-border-radius: 15px;
border-radius: 15px;
text-transform: lowercase;
letter-spacing: 4px;
color: #ffffff;
cursor: pointer;
font-size: 21px;
}
And the current result is:
This could be due to letter-spacing: 4px;
Instead of this and , you can try using padding instead.
.info {
font-weight: bold;
text-align: center;
background-color: #C73C3C;
-moz-border-radius: 15px;
border-radius: 15px;
text-transform: lowercase;
/*letter-spacing: 4px;*/
padding: 0 20px;
color: #ffffff;
cursor: pointer;
font-size: 21px;
}
<span class="info">i</span>
You can set div above span tag.Then your text will come in center.
.info {
font-weight: bold;
text-align: center;
background-color: #C73C3C;
-moz-border-radius: 15px;
border-radius: 15px;
text-transform: lowercase;
letter-spacing: 4px;
color: #ffffff;
cursor: pointer;
font-size: 21px;
}
div{
text-align:center;
}
<div>
<span class="info"> i <span id="uitleg_itje">Bla bla.
</span></span>
</div>
Related
<style>
.new-title {
font-family: arial;
text-align: center;
color: orange;
font-weight: bold;
font-size: 15px;
margin-bottom: 5px;
}
.macbook-title {
font-family: arial;
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: 5px;
}
.supercharge-title {
font-family: arial;
font-size: 35px;
text-align: center;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.price-title {
font-family: arial;
font-size: 15px;
text-align: center;
margin-top: 10px;
font-weight: 5px;
margin-bottom: 15px;
}
.buy-title {
background-color: blue;
color: white;
margin-left: 1000px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 20px;
}
</style>
<p class="new-title">New</p>
<p class="macbook-title">MacBook Pro</p>
<p class="supercharge-title">Supercharged for pros</p>
<p class="price-title">From $1999</p>
<p>
<span class="buy-title">Buy</span>>
</p>
New
MacBook Pro
Supercharged for pros
From $1999
Buy>
I approached it like the rest of my code, with text-align: center; but for some reason it doesn't move like my other text does, I've also tried margining but that doesn't seem like an efficient way to do it.
change your .buy-title to this. Live Demo Here
.buy-title {
display:block;
background-color: blue;
color: white;
margin: 0px auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 20px;
width: fit-content;
}
There are many ways to do so, But I suggest as you are very new to CSS you must go with CSS Flex. It will definetely boost your CSS skills.
You can see the snippet below how simple it is.
Refer this to learn more about flex: https://www.w3schools.com/css/css3_flexbox.asp
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new-title {
font-family: arial;
text-align: center;
color: orange;
font-weight: bold;
font-size: 15px;
margin-bottom: 5px;
}
.macbook-title {
font-family: arial;
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: 5px;
}
.supercharge-title {
font-family: arial;
font-size: 35px;
text-align: center;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.price-title {
font-family: arial;
font-size: 15px;
text-align: center;
margin-top: 10px;
font-weight: 5px;
margin-bottom: 15px;
}
.buy-title {
background-color: blue;
color: white;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 20px;
}
<div class="container">
<p class="new-title">New</p>
<p class="macbook-title">MacBook Pro</p>
<p class="supercharge-title">Supercharged for pros</p>
<p class="price-title">From $1999</p>
<p>
<span class="buy-title">Buy</span>
</p>
</div>
I tried to create a corresponding button that contains the name of the button and a number.
I used padding to separate the button name from the number, however when the number is very high, that same number overlaps the button name.
Is there a way to center the name on the button and make the button fully responsive regardless of the number displayed?
DEMO
Html
<div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">
<a style="color: #51CC8B;" class="btnP">Prepared
<span class="nav-link btn-glyphicon1">1500</span>
</a>
</div>
Css
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
outline: none;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
right: 0;
position: absolute;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #51CC8B;
}
PROBLEM
As you can see in the image, the number overlaps the name :( I want the text to always remain centered on the button and the width to adjust according to the size of the number.
Can someone help me?
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
justify-content:center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
outline: none;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
border-radius: 16px;
align-items:center;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
margin-left:20px;
color: #51CC8B;
}
<div class="d-flex justify-content-md-center flex-nowrap" style="margin-top:50px">
<a style="color: #51CC8B;" class="btnP">Prepared
<span class="nav-link btn-glyphicon1">1500</span>
</a>
</div>
I have a line with buttons. When I reduce the screen I want all the buttons to remain in line and work as an overflow-x: scroll.
My problem is that when reducing the screen, the overflow x works, but the button comes out of the screen.
How can I solve this? Thanks
DEMO
CODE
<div class="row justify-content-center flex-nowrap myrow" style="margin-top: 160px;">
<a style="color: #51CC8B;" class="btnP">PRG
<span class="nav-link btn-glyphicon1">100</span>
</a>
<a style="color: #4981C2;" class="btnR">TRV
<span class="nav-link btn-glyphicon">50</span>
</a>
<a style="color: #4981C2;" class="btnD">DN
<span class="nav-link btn-glyphicon">21</span>
</a>
</div>
Problem
removed row class
and
added d-flex justify-content-md-center classes
and added below css
.myrow {
overflow-x: auto;
}
.myrow {
overflow-x: auto;
}
.btn-glyphicon {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
background: #ffffff;
right: 0;
position: absolute;
background: #DBE7F4 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #4981C2;
}
.btn-glyphicon1 {
padding: 8px;
line-height: 6px;
text-align: center;
border-radius: 16px;
background: #ffffff;
right: 0;
position: absolute;
background: #DDF6E9 0% 0% no-repeat padding-box;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
letter-spacing: 0;
color: #51CC8B;
}
.btnR {
padding-right: 50px;
padding-left: 8px;
height: 24px;
font-size: 13px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #4981C2;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #ECF2F9;
cursor: pointer;
outline: none;
}
.btnP {
padding-right: 50px;
padding-left: 8px;
height: 24px;
font-size: 13px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #51CC8B;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #EDFAF3;
cursor: pointer;
outline: none;
}
.btnD {
padding-right: 50px;
padding-left: 8px;
height: 24px;
font-size: 13px;
transition: all 0.3s ease 0s;
cursor: pointer;
white-space: nowrap;
position: relative;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
margin-right: 16px;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
line-height: 6px;
letter-spacing: 0;
color: #4981C2;
-ms-border-radius: 16px;
-o-border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
border-width: none;
background: #ECF2F9;
cursor: pointer;
outline: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex justify-content-md-center flex-nowrap myrow" style="margin-top: 160px;">
<a style="color: #51CC8B;" class="btnP">PRG
<span class="nav-link btn-glyphicon1">100</span>
</a>
<a style="color: #4981C2;" class="btnR">TRV
<span class="nav-link btn-glyphicon">50</span>
</a>
<a style="color: #4981C2;" class="btnD">DN
<span class="nav-link btn-glyphicon">21</span>
</a>
</div>
we have a button, its displaying like this :
we want to display like :
.saveall
{
text-transform: capitalize;
font-weight: bold;
float: left;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab,Arial,Helvetica,sans-serif;
overflow: visible;
width: auto;
cursor: pointer;
vertical-align: middle;
display: inline-table;
padding: 9px;
position: relative;
margin-left: 6px;
margin-right: 6px;
}
<button class="saveall" title="Save all'" type="button" style="float: left;padding: 5px 5px 5px 0;" onclick="changeaction()" id="mass_update_butn">
<span><span>Invoice</span></span>
</button>
Please help me to find solution
thanks in advance
Seems simple enough.
Remove the inline styling and the border, then tweak the padding.
Those inner spand aren't really necessary unless you have a particular reason for having them.
.saveall {
text-transform: capitalize;
font-weight: bold;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab, Arial, Helvetica, sans-serif;
cursor: pointer;
vertical-align: middle;
display: inline-block;
padding: 6px 24px;
position: relative;
border: none;
}
<button class="saveall" title="Save all'" type="button" onclick="changeaction()" id="mass_update_butn">
Invoice
</button>
Try this
button {
border: none;
background: #3FBDF7;
color: white;
font-size: 13px;
font-weight: bold;
padding: 5px 25px;
}
<button>Invoice</button>
I need help figuring out why it is when I add a link in this code that it is altering my entire div block.
This is what the page looks like:
As soon as I make the text a link, it adds about 8px to the bottom (notice how the image is smaller than the div block).
What can I do to make this look like all of my other blocks?
Update: I believe I found the code that is causing the problem, it is in the CSS of the body. There is a style that has line-height at line-height: 1.625; - when I delete this, it fixes the issue. But now I am wondering how can I remove this code for my page, without effecting the rest of the site?
Here is the problem CSS:
body {
color: #3B3F42;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.625;
}
And here is the rest of the coding
.ratingWrapTopRated {
background: #fff;
width: 100% !important;
height: 90px !important;
margin: 0 auto;
display: table;
font-family: Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background: #fff;
color: #fff;
display: table-cell;
line-height: 0;
width: 90px;
padding-right: 4px;
}
.cigarName {
background: #ff5100;
color: #fff;
text-align: center;
display: table-cell;
vertical-align: middle;
word-spacing: 6px;
text-transform: uppercase;
font-size: 1.2em;
padding: 0px 3px 0px 3px;
}
.numericalScoreTopCigars {
background: #000;
color: #fff;
text-align: center;
width: 25%;
display: table-cell;
font-size: 4.9em;
letter-spacing: 3px;
vertical-align: middle;
font-weight: bold;
border-left: 4px solid;
border-color: #fff;
line-height: 0;
}
a.ratingsLink:link {
text-decoration: none;
background: #ff5100;
color: #fff;
text-align: center;
vertical-align: middle;
word-spacing: 6px;
text-transform: uppercase;
font-size: 1em;
padding: 0px 3px 0px 3px;
}
<span class="ratingWrapTopRated">
<span class="cigarImage hidebuttons"><img class="alignnone size-thumbnail wp-image-2352" src="http://cigardojo.com/wp-content/uploads/2012/08/padron-serie-1926-150x150.jpg" alt="Padron Serie 1926 No. 9 Maduro" width="150" height="150" /></span>
<span class="cigarName shortenText"><a class="ratingsLink" href="http://cigardojo.com/?p=1019">Fuente Fuente OpusX XXX Belicoso</a></span>
<span class="numericalScoreTopCigars">96</span>
</span>