I'm using an Unicode symbol (U+25C0) to make a "left arrow" on a button, but the symbol itself is shifted down a bit. I couldn't find a way to center it, I tried margins, padding and line-height with no success.
Here's what it looks like:
And the simple code:
h2 {
font-family: Oswald;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<h2>
<span style="font-size: 70%">◀</span>
Return
</h2>
I just need to vertically center the symbol, if anyone could help me :)
You can add this to your CSS to center it vertically:
h2 {
display: flex;
align-items: center;
}
if you want to align it horizontally as well use justify-content: center;
It looks like it because of style="font-size: 70%". When I remove it, it looks fine. try to remove it or move it to another place outside the span element
Related
I have checked every solution I can find listed on Stackoverflow for this common question and none are working for me. I have tried adjusting font-size, line-height, height, box-sizing, padding, vertical-align, display and position. I don't want to use absolute positioning because I want the container to adjust naturally to the size of the text.
The text inside the inner most span of all button elements tends to slide off the top of its container (into padding territory) resulting in text that isn't vertically aligned centrally, see image above. I added display: flex; align-items: flex-end which pulled it in a tiny bit but hasn't fixed the problem. What is happening?
I am using a page builder so I will try to pull out the relevant CSS but I might miss something. Please use inspector on any button on the staging website to check working code.
.elementor-button-wrapper {box-sizing: border-box}
.elementor-button {
line-height: 1.2em;
display: inline-block;
padding: 12px 24px;
box-sizing: border-box;
}
.elementor-button-content-wrapper {
display: flex;
justify-content: center;
box-sizing: border-box;
line-height: 1.2em;
}
.elementor-button-text {
display: flex;
align-items: flex-end;
box-sizing: border-box;
line-height: 1.2em;
}
<div class="elementor-button-wrapper">
<a class="elementor-button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">
Order Now
</span>
</span>
</a>
</div>
Thank you for your time.
A couple of things to think about:
Use a button if it's a button. Don't try to masking t a div as a button, because you will loose a lot of functionality, like hover state, tab order and things like that.
Second of all, always try to use as little HTML and CSS as possible. You have over-complicated the whole element.
Thirdly, and this is actually the solution: you had 1.2em as line-height, which means that you will automatically get a space underneath your text. A suggestion is to instead use padding inside the button to create space around the characters, so you never need to bother about how big the text is.
.elementor-button {
line-height: 1em;
border: 1px solid;
border-radius: 1em;
padding: 0.5em 1em;
cursor: pointer;
}
<button class="elementor-button">
Order Now
</button>
The thought occurred to me to try a different font. I tried the default sans-serif as well as Montserrat and it seems to be displaying correctly. I didn't realise fonts could come with alignment issues like this!
Display Flex bug
I'm trying to make this icon just in front of the text but there must be flex and aligin-contet: center; otherwise the text would be such a scatter you will see in the photo where there is a red line so I have already used display:flex; and aligin-content: center; I need to do it somehow so that the icon is still and the show somehow I can't do it I've been doing it for 2 days and they've never helped me yet.
#autocomplete a {
font-weight: bold;
text-decoration: none;
color: #111;
padding: 0.2rem 0.5rem;
border-radius: 20px;
align-items: center;
display: flex;
}
#autocomplete .fa.fa-search {
padding: 5px;
float: left;
}
without Flex and content-aligin: center;
with Flex and content-aligin: center;
you can try using "flex-direction: row-reverse;" it should reverse your items inside the container with the display flex applied.
have a nice day and good luck 😁
My approach would be like this:
Add the following CSS definition:
#autocomplete a * {
vertical-align: middle;
}
The "bold" text is outside a span or similar element. You should also put it into a <span>, so the correct style will be applied to it.
Example:
<a href="./search?q=abcdef&source=autocomplete" data-index="1">
<span class="nobold">abc</span>
<span>def</span>
<i class="fa fa-search"></i>
</a>
(The span around def is the new one.)
Explanation:
The * in the CSS definition in 1. will make the style apply to the selected element and all its children. So, in 2. you just add a matching "child" by using the span. I've tested it and it works for me.
Hint: I don't know if you know about this technique, but you can always use the browser's development tools in order to try such things "on the fly" within the page being shown.
Okay i am working on this and the Ori Guy add me some Idea and i make this code
justify-content: flex-end;
flex-direction: row-reverse;
And look is working :D
Really Thank all who help ME!! THANK YOU <3
I'm working on a Shopify store currently and tweaking the code to make the multiple paragraphs of a <div> justified while the last line is aligned to the center.
However, the second paragraph in the div is following the first property, but not the one for the last line. So I have a single paragraph with the text aligning to the left.
Here's what my css code looks like:
.rte-setting.mega-subtitle p {
text-align: justify;
text-align-last: center;
/*width: 70%;*/
position: relative;
}
It might just be a Shopify thing, but can anyone help?
If you want the last paragraph in a block behave differently you want to use the last-of-type pseudo class.
.rte-setting.mega-subtitle p {
text-align: justify;
}
.rte-setting.mega-subtitle p:last-of-type {
text-align: center;
}
try
text-align: justify !important;
Title is pretty much self-explanatory... I have this html div element, and it doesn't look the way I want it to, and that happens when I resize the screen:
<div class='serveMessage'><strong>Fun fact:</strong> over 1,259,468 american students fail every year!</div>
I tried removing the &_nbsp; but it still doesn't work :(
This is want I want it to look, but with bold text:
https://imgur.com/a/2u0GS
This is what it looks like instead with the strong tag:
https://imgur.com/a/OGF9S
The css involved!
.content .serveMessage {
margin: 0 8px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
color: #63827b;
display: flex;
align-items: center;
justify-content: center;
padding: 11px 0;
text-align: center; }
Thank you for your assistance!
A text run is a valid flex item, so by failing to place the strong tag and the following text run in a common parent, you have two flex items in your flex container:
a <strong> element
a text run
A text run is basically a text node that the browser has to interpret as a unit, but that doesn't have it's own semantic or container element.
You should be able to solve this by doing one of the following:
changing the display of .serveMessage to something other than flex (say, block), or
adding a containing element within .serveMessage so that the text run isn't flexed along with <strong>
The first seems preferable, but the second makes sense if you have some compelling reason to flex this class elsewhere, and this is an isolated workaround.
I am trying to create a pull quote class that can be applied to any text. Usually this will be a short quote I want to float to the right. I would like the text in the body to come up to the set margin for each line in the floated pull quote.
Goal: http://i.stack.imgur.com/XC5NA.jpg
The problem I am running into is that the div or span is creating a rectangle around the floated text so the shorter lines in the pull quote have a lot of whitespace to the left.
What I'm getting example: i.stack.imgur.com/bvJv2.jpg
I want this text flow effect to work automatically which means I don't want to have to set each line's "width" automatically. I just want to apply a class to a div or span and have it achieve this look. I would also like to keep this HTML/CSS/CSS3. I can't easily apply JS to this since it's a closed CMS I'm dealing with.
Any tricks? Is this even possible?
What you're trying to is not possible, as far as I know, with text wrapping around other text.
It is, however, possible to wrap text around floated shapes. Take a look at the spec for CSS shapes.
Maybe you can do something with a polygon to create the effect you're trying to accomplish; though, I suspect it will be a challenge since it is likely that the content of your quotes are dynamic.
What about doing something like this: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/
Making a h1 tag and put some spans inside them for each word/few words.
<h1>
<span>"This is a</span>
<span class="spacer"></span>
<span>blockquote</span>
<span class="spacer"></span>
<span>to test"</span>
</h1>
Then for the css the following:
h1 {
font-size:44px;
margin: 0;
font-family: sans-serif;
}
h1 span{
float:right;
text-align: right;
clear:both;
margin: 0;
margin-left: 14px;
}
.spacer {
height: 10px;
}
.paragraph {
text-align: justify;
}
Note im making the text around heading (.paragraph class) justified and that will give you something like this: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/
remember its editible for your likeing good luck