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>
Related
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.
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';
}
Today I was having an awful lot of trouble getting some small text vertically centered within elements that were circle which were created using border-radius.
Some of the elements looked fine, but one in particular (a lowercase e was too close to the bottom); I had 2px of padding and it seemed to look fine; however once viewed on a mobile device it was slightly lower.
Here is some code that is as close of a replica as I could come up with to show the issue; you will notice this text has a similar issue with the lowercase e being too close to the bottom.
HTML:
<div class="option">
<span class="icon">t</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">f</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">e</span>
<span class="text">moo#moo.com</span>
</div>
CSS:
.option {
margin-bottom: 10px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
.option .icon {
display: inline-block;
text-align: center;
width: 24px;
height: 24px;
line-height: 24px;
color: #fff;
border-radius: 50%;
background-color: blue;
}
.option .text {
padding-left: 10px;
}
JSFiddle: http://jsfiddle.net/7bygsgn1/7/
Whilst I haven't tried them with the particular code on jsfiddle, when I was having the issue today I tried a whole range of centering techniques including:
Using line-height
Using absolute positioning
Using vertical-align: middle; in conjunction with display: table-cell;
Negative Margins
Using the method explained here.
Either it had no affect on the centering or caused the shape of the circle to change.
Is there any way you can reliably vertically center in situations such as this?
You may use an inline-block pseudo-element with an height of 24px / 100% , and vertical-align it to middle.
.option {
margin-bottom: 10px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
.option .icon {
display: inline-block;
text-align: center;
width: 24px;
height: 24px;
color: #fff;
border-radius: 50%;
background-color: blue;
}
/* here the pseudo-element method */
.option .icon:before {
content: '';
display: inline-block;
padding-top: 100%;/* cause here we have a square and width for percentage vertical (padding/margin) is the reference , height:100%; or height:24px; will do as well */
vertical-align: middle;
}
/* end update */
.option .text {
padding-left: 10px;
}
<div class="option">
<span class="icon">t</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">f</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">e</span>
<span class="text">moo#moo.com</span>
</div>
or display:flex; , the most simple:
.option {
margin-bottom: 10px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
.option .icon {
/* next-three lines to center content both axis */
display: inline-flex;
justify-content:center;
align-items:center;
/*text-align: center;*/
width: 24px;
height: 24px;
color: #fff;
border-radius: 50%;
background-color: blue;
}
.option .text {
padding-left: 10px;
}
<div class="option">
<span class="icon">t</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">f</span>
<span class="text">123456789</span>
</div>
<div class="option">
<span class="icon">e</span>
<span class="text">moo#moo.com</span>
</div>
Vertically/Horizontally center anything inside a parent element without knowing the heights/widths of either:
/* This parent can be any width and height */
.parent {
text-align: center;
/* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
}
/* The ghost, nudged to maintain perfect centering */
.parent:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
}
Essentially this creates a ghost element inside the parent that allows the child to be positioned relative to it. The height: 100% allows the vertical-align: middle to do its job properly.
Hope this helps!
Edit: Credit to https://css-tricks.com/centering-in-the-unknown/
Trying to put an image next to a paragraph but it does not seem to work.
This is what I have:
<div class="dhn-info-div">
<p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
<div style="clear:both"></div>
</div>
and CSS:
.dhn-info-div {
margin-top: 20px;
background-color: #a20e45;
width: 95%;
display: inline-block;
}
.dhn-info-div p {
padding: 20px 40px 20px 40px;
color: white;
font-size: 18px;
line-height: 35px;
word-spacing: 5px;
}
.dhn-info-div img {
float: right;
}
Image has to be on the right of the text. The div shouldn't be 100% in size. Cheers
This is how I want it to look:
http://i.stack.imgur.com/bPxbB.png
Depending on if you want to wrap the text around the image or have 2 columns, here’s both solutions:
If you want to wrap the text around the image it needs to be within the p tag. See example (I have also added 10px padding around the image).
If you want 2 columns you need to define the width of both so they fit in. I have also added float: left; to both and some padding to the image to make it look slightly better. See example
EXAMPLE
You needed to add some width to some elements such as the text
also you had no width or height on your image.
I also added top:40px; to your image to bring it down to the level of the text
Can you put the <img> in your <p> at top? that would fix it:
<div class="dhn-info-div">
<p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>
</p>
<div style="clear:both"></div>
</div>
Edit: is now responsive!
i made this fiddle, check it http://jsfiddle.net/fYh7u/
you can wrap the text in a div, and the image in another div, inside the main div "dnh-info-div", in my example i miss the "div", at end of class, because is obvious.
HTML:
<div class="dhn-info">
<div class="dhn-text">
<p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
<img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>
CSS:
.dhn-info {
width: 100%;
background-color: #a20e45;
display: inline-block;
}
.dhn-info .dhn-text {
width: 50%;
height: auto;
float: left;
padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
font-family: arial;
font-size: 24px;
color: #fff;
line-height: 30px;
text-transform: uppercase;
word-spacing: 5px;
margin: 0;
padding: 0;
display: block;
}
.dhn-info .dhn-img {
width: 40%;
height: 100%;
float: right;
}
.dhn-info .dhn-text p > span.text-purple {
color: #9b59b6;
}
.dhn-info .dhn-img img {
display: block;
height: auto;
max-width: 100%;
}
I'm using CSS buttons from this tutorial:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
Here's the code of the button:
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
Just to make a little more certain, you can do something like this:
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
Modify the button class for these properties:
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
The a.button is floated to the left. You could try float: none; on that element. margin: 0 auto; is also useful for center-aligning elements.
Does that help?