+ I want to align it in the vertical middle. It is inline-block.
Vertical-align: middle is not working?
There are other methods such as absolute/relative positioning and maybe flex, But I am trying If I can fix it with simplicity.
Well, I used flex because simplicity. So… YMMV and someone i’m sure can do it better than I.
First, put your icon after the headline in the HTML. Because thats where you want it, and it makes sense to live there.
Change the CSS for .quest
display: flex
Add to the CSS for .quest h6:
flex: 1;
Remove the following CSS from .icon:
float
height
width
padding
Add the following CSS to .icon:
margin-top: auto
margin-bottom: auto
(by my count, thats 4 CSS rules removed, 4 CSS rules added, and it gives you what you want. Also it makes your code slightly more readable because the icon follows the headline, which matches the display presented.)
3 Likes
See https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Note that
vertical-alignonly applies to inline and table-cell elements: you can’t use it to vertically align block-level elements.
1 Like
After doing what you suggested gave this →
May be some more tweaking is needed.
Can we do this w/o flexbox.
Also,
Why here it is working perfectly →
Same Code - Same CSS - Same JS
Are you sure about that?
Go look at the CSS for .quest again.
3 Likes
I also see that you have the rule float:right applied and also display:inline-block. The display:inline-block does nothing because float controls the display property of an element and sets it to block.
Vertical-align:middle does apply to inline-block but only with respect to other inline (or inline-block elements on the same line).
You seem to be mixing concepts a little and as @m_hutley said above flex is ideal for what you want here 
2 Likes
You dont think that having a top and bottom padding on the element that contains the thing you’re trying to center has a significance?
2 Likes
#1 → May be I am slightly lost for now, but I just used the same HTML/CSS/JSS, and the issue is there in the WP version. I am unable to figure out where you are directing me.
#2 →
I have implemented your solution.
I am wondering why CSS being the same, and also
both <h6> tag and icon div are the child to quest, yet
+ Sign is a deviation. It seems to hug the right wall whereas heading is in sobriety.
I wasn’t aware HTML could be drunk.
Your page seems to be working for me.
The icon div has no width; so it measures its margin from its left border now. If you want to give it a fixed width (the 30px from the horizontal bar) you can certainly do that again to help you align the element ‘inwards’ from the right as you desire.
1 Like
Even margin-right does the same:
margin-right: 30px;
Any specific reason to go back to width? or both should be equally good?
They’ll both do the job. Purists may say you should have a width, and then use the margin to move it further if required, but they both do the same thing in this specific case.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.