i am using merterial symbol rounded icon along with bootstrap, in image slider i am using back and forward arrows, forward arrow are center align (horizotally) with in the span but back arrow is not, see the screen shotsee red border of span
<button class="carousel-control-next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="material-symbols-rounded">
arrow_forward_ios
</span>
</span>
</button>
<button class="carousel-control-prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="material-symbols-rounded">
arrow_back_ios
</span></span>
</button>
.carousel-control-prev > span {
background-color: white;
border: solid 1px #F0F0F0;
width: 40px;
height: 40px;
line-height: 38px;
border-radius: 50%;
color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
}
i am trying to center aling horizontally the meterial icons
Your CSS is only applied to .carousel-control-prev > span, not the .carousel-control-next > span element.
That doesn't totally make sense looking at your screenshot, but I think it's safe to say that you should revisit the CSS there and make sure you're doing the same thing to both icons.
Maybe try:
.carousel-control-prev > span,
.carousel-control-next > span {
background-color: white;
border: solid 1px #F0F0F0;
width: 40px;
height: 40px;
line-height: 38px;
border-radius: 50%;
color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
}
Also, the way your CSS is written means that the styles are applied to the span that wraps the icon's span, not the icon's span itself. That might also be worth looking at.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
I want to know how to draw a circle around only two letter in a logo using CSS.
Please check the attached picture
Here's the code I used, but it didn't work
.badge {
height: 60px;
width: 60px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: #337EFB;
padding:-5px;
}
<span><a class="badge" href="/">fb</span><span>keeper</span></a>
Set the display of the .badge to inline-block, and use line-height to center the text vertically.
Note: to make the entire title clickable replace the outer span with an a tag, and convert the one on the inside to a span tag.
.title {
font-size: 2em;
text-decoration: none;
color: var(--title-color);
--title-color: #337EFB;
}
.badge {
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 50%;
background: var(--title-color);
color: white;
}
<a class="title" href="#">
<span class="badge" href="/">fb</span>
<span>keeper</span>
</a>
You have not closed your anchor tag correctly. You need to close it before your second span for word keeper start and inside a first span, Please look into below code and try once:
<span><a class="badge" href="/">fb</a></span><span>keeper</span>
There was a problem in your html code. Here is what you should put :)
<span class="badge">fb</span><span>keeper</span>
Using this lovely html and css as a guide, I'm able to display my initials over my photo.
This is great, however, I would like to display only the initials in the event the image does not exist; if the image exist, no peron initials should be rendered.
In other words, the image should overlay the initials when that image exists (so as NOT to see the initials).
.profile-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
background-color: lightgray;
border-radius: 50%;
border: gray 2px solid;
background-size: cover;
background-position: center;
background-repeat: none;
}
.profile-dot span {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
<span>BM</span>
</i>
In reality, the actual initials are coming from an Angular expression such as:
<span>{{ dataItem.personInitials }}</span>
I got a hint re: the use of figure, but I'm not quite there yet - i.e.
<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}" >
<figcaption>
<span>{{ dataItem.patientInitials }}</span>
</figcaption>
</i>
</figure>
you can add a class to the image when the onerror event happens and then use that class to show/hide the span with the adjacent sibling combinator.
You will also need to add a couple of lines to your css fil so that it hides the span by default and it makes it visible when the image contains that class
.profile-dot img+span {
display: none;/*Hide it by default*/
}
.profile-dot img.broken-link+span {
display: block; /* only show when img has class broken-link*/
}
<figure>
<i class="profile-dot">
<img height="30" width="30" onerror="this.style.display='none'; this.className='broken-link' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}" >
<span>{{ dataItem.patientInitials }}</span>
</i>
</figure>
If you are using angular, you can one simple if check
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
<span *ngIf="!dataItem.imageSrc">{{dataItem.personInitials}}</span>
</i>
Demo in action is here - https://stackblitz.com/edit/angular-r3q4i6
Personally I'd do something like this.
Notice if there is a valid image, it displays. If the link is a dud, then the background color and text would display. Also displays the text while image is loading (nice touch for slower connections).
Have a great weekend!
.profile-dot {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
background-color: lightgray;
border-radius: 50%;
border: gray 2px solid;
overflow: hidden;
}
.profile-dot figure {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: none;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.profile-dot figcaption {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<div class="profile-dot">
<figure style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)"></figure>
<figcaption>BM</figcaption>
</div>
<br/><br/>
<div class="profile-dot">
<figure style="background-image: url(BROKEN-LINK)"></figure>
<figcaption>BM</figcaption>
</div>
If you use the z-index property in css, you can set the <span> behind the background image. You can learn more about z-index here. (You will also have to remove the background color in order to make this work.)
.profile-dot {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border-radius: 50%;
border: gray 2px solid;
background-size: cover;
background-position: center;
background-repeat: none;
}
.profile-dot span {
font-weight: 700;
color: #fff;
font-style: normal;
font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg);">
<span style="z-index:-1;">BM</span>
</i>
I have an input box for text and directly next to it is a button. The problem is when the button font-size and input box font-size is different, the button won't be correctly aligned.
Ex - different font-sizes. Notice the bottom of the button extends past the input box much more than the top
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Ex: Same font sizes: button is aligned:
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 20px;
border-radius: 2px;
}
<input>
<button class="btn btn-primary m-l">Add</button>
I'm not sure this is the best solution, but you can achieve this by giving the input a height, and vertically aligning both elements to the middle. See snippet below.
input{
font-size:20px;
height: 30px;
vertical-align: middle;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
vertical-align: middle;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Use CSS Flexbox. And apply align-items: center to make your child <div>s vertically centered. In my case I've used body as my parent element
Have a look at the snippet below:
input{
font-size:20px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
margin-left: 5px;
}
body {
display: flex;
align-items: center;
}
<input>
<button class="btn btn-primary m-l">Add</button>
Hope this helps!
Simply wrap your content into a .container div and apply dispaly: flex to it and that should do the trick for you.
.container {
display: flex;
}
input{
font-size:20px;
margin-right: 5px;
}
.btn {
padding: 8px 12px;
font-size: 14px;
border-radius: 2px;
}
<div class="container">
<input>
<button class="btn btn-primary m-l">Add</button>
</div>
Hope helps (y).
This should be very simple, and apologies if it's a duplicate. I can't get some text in a span to vertically align beside an icon.
Example:
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
CSS I've tried:
Setting the span to display: inline-block and assigning padding and margin. This also moves the icon up.
Setting the link to position: relative and positioning the span. This causes the icon to move, as the span is now taken out of the flow.
Adjusting the line-height of the span. Again, this affects the icon.
Floating the span. This doesn't work.
Is there something I'm missing? I'm not very familiar with flex, would that be a solution? (Note I have to support very old browsers...)
Suggestions much appreciated!
Add following css:
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Give the <i> an id (or class, I named it #k), then add this ruleset:
#k { vertical-align: middle; }
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
#k {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a href='#/'>
<span>Search</span>
<i id='k' class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Use CSS Flexbox. Apply display: flex property to .box a and use align-items: center (this will align your items vertically centered).
Have a look at the snippet below:
.box {
width: 30%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a {
display: flex;
align-items: center;
justify-content: center;
}
.box a span {
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Hope this helps!
You can easily adjust the positioning of your text in the span if you first make it a block element, and then apply a float. Once this is done, you can apply line-height as you initially mentioned, but without affecting the icon.
Here is a JSFiddle to show what to do. Incredible easy, and you don't have to touch your original CSS: https://jsfiddle.net/pgkjaa8c/
Solution using Floats
.box span {
display: block;
float: left;
line-height: 40px;
}
And you can change the float from left to right if you want the text on the right. Additionally, you can apply left and right padding to push the text away from the icon if you so desire: https://jsfiddle.net/rz4y4696/
.box span {
padding-left: 15px;
display: block;
float: right;
line-height: 40px;
}
Additionally, I advise against using flex. People are constantly pushing flex as a solution, but it eliminates many legacy browsers from support. This would be one of the more traditional ways of implementing this, with fully cross browser, and legacy browser support.
Solution without using Floats
If you want a solution that does not require floats, and will work for varying widths, then you'd have to remove the <i> tag and add your FontAwesome icon to your CSS. You can see the solution here: https://jsfiddle.net/rwkypte8/2/
You can get the value of the FontAwesome search icon here: http://fontawesome.io/icon/search/
The HTML and CSS is below:
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
</a>
</div>
CSS
.box {
width: 50%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box span {
display: block;
line-height: 40px;
text-align: center;
}
.box span:after {
padding-left: 20px;
font-family: 'FontAwesome';
font-size: 30px;
content: '\f002';
}