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
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!
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;
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
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 have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.
So all the relevant code is as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
a > img {
text-decoration: none;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
Many thanks in advance.
Regards,
Richard
PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.
Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.
You can turn the images into block elements by floating them, then they are not part of the text:
a > img {
float: left;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.
I was running in the same doubt. The text-decoration set to none works for me:
<a href="..." style="text-decoration:none;">
<img src="...">
</a>
As was said befor, you can use a class to make this more generic.
Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.
I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.
.myDiv {
display: flex;
justify-content: center;
align-items: center;
}