I have two elements within a flexbox container. One of these elements is a Tag I created. When the tag is within a flex container it appears to shift the text to the top of the Tag. How do I prevent this?
I've tried setting the parent container to align-items: center; which shrinks the Tag.
HTML
<div>
<span />
<button>Resend</button>
</div>
CSS
div {
display: flex;
justify-content: space-between;
height: 100%;
}
span {
padding: 3px 4.8px;
text-align: center;
line-height: 0.75rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1;
font-size: 0.75rem;
font-weight: bold;
border: 1px solid;
white-space: nowrap;
background-color: red;
color: #fff;
border-color: red;
}
button {
display: block;
width: 100%;
text-align: center;
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: 0.25s ease;
color: blue;
border-width: 1px;
padding: 2px 4px;
font-size: .857142rem;
border-radius: 4px;
}
IMAGE
What appears to be happening is that the span element is increasing the bottom padding to match the total height of the button element that is next to it. One fix to this solution is to add display:table; to the css of the span element. After that you can adjust the padding of the span to suit and the text would remain centrally aligned in the span. Idea of using display:table to fix this problem taken from Cris J in this Post.
Related
I have an image and a span in a button, and I've tried using:
flex with align-items: center
setting span line-height to same height as container
inline-block and vertical-align
but if I don't add a 1px padding-top to the image, it doesn't appear to be truly vertically aligned in the div, while the span text looks fine, and I can't figure out why.
HTML
<button class="metabolite-btn">
<img src="/images/metabolite/icon_question.svg" class="metabolite-btn__image">
<span class="metabolite-btn__text">代謝物質とは</span>
</button>
CSS
.main-wrapper {
.metabolite-btn {
width: $vw-size-115-width-375;
border-radius: 14px;
border: none;
height: 28px;
background-color: $main-color;
padding: 0 0 0 5px;
text-align: left;
cursor: pointer;
&__image {
width: $vw-size-20-width-375;
padding: 1px 0 0 0;
}
&__text {
font-size: $vw-size-12-width-375;
font-weight: bold;
color: $white;
line-height: 28px;
}
}
To align both the elements vertically, you need to add display:flex and align-items: center to parent which is your button (Shown below)
//CSS
button {
display: flex;
align-items: center;
}
Working Demo
I have inline block element (red circle) inside other block with some paddings. In Firefox this looks correctly and circle located at the middle of block occupied by equal paddings. However in Safari this looks incorrectly - circle a little bit moved to top and not centered vertically. I tried different vertical-align and line-height settings but this does not help, in Safari this still looks to different not like in Firefox.
HTML:
<div class="post-categories">
<a href="#">
<span class="cat-dot"></span>Uncategorized
</a>
</div>
CSS:
body {
line-height: 1.7;
font-family: Arial;
}
.post-categories {
position: relative;
font-size: 14px;
margin-bottom: 10px;
font-weight: bold;
text-transform: lowercase;
display: flex;
flex-wrap: wrap;
}
.post-categories a {
font-weight: normal;
text-decoration: none;
padding: 1px 15px 1px 10px;
background-color: #ffffff;
border: 1px solid #000;
margin-bottom: 5px;
margin-right: 10px;
border-radius: 5px;
}
.post-categories .cat-dot {
display: inline-block;
width: 13px;
height: 13px;
position: relative;
top: 1px;
line-height: 14px;
border-radius: 100%;
margin-right: 10px;
background-color: red;
}
Codepen where you can check this: https://codepen.io/dedalx/pen/xxbbMOo
Question - How I can make circle and text vertically centered in parent block in the same way in all modern browsers?
I recently created a website and after I created a button with a <a> on it, the text kept aligning it self to the bottom of the text.
How do i make the text align to the center horizontally.
I have tried adding this code: "display:table-cell; vertical-align:middle;" to the button's CSS, and I have tried changing the position with these code snippets: "relative, fixed, static etc." But none of them changed the horizontal position of the text.
.button {
background-color: #171717;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
height: 10px;
}
a {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<center>
<button class="button">Buy Now!</button>
</center>
As commented, do not use <center> but text-align or display:flex/grid/table behavior and margin. Also a clickable element is not made to hold another clikable element. Use <button> or <a> . button is a form element and could be tricky to restyle.
example of what you could do :
.button {
/* what seems to trouble you */
padding: 15px 32px;
font-size: 20px;
/* okay so far, but height is half of font-size !! */
height: 10px;
/*Your reset*/
background-color: #171717;
border: none;
color: white;
font-size: 16px;
border-radius: 30px;
text-decoration: none;
/* Now try the layout reset and use flex behavior */
display: inline-flex;
align-items: center;
/* ==> because items too big will overflow from the container */
}
a {
box-sizing: border-box;
}
body {
text-align: center
}
<button class="button">Test me! (form element) </button>
Test me! (hyperlink)
How about adding style="position:absolute" in the button tag?
The problem appears to be – quite apart from the use of obsolete and invalid HTML – that you've defined a height of 10px, with a font-size of 16px and padding of 15px (top and bottom). That sum doesn't add up, the height would require:
16px + 2*(15px) = 46px
to contain the text in the centre. To center the text, though I'm replacing the <a> with a <span> for the purposes of validity, you could simply remove the height declaration:
.button {
background-color: #171717;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 30px;
}
span {
text-decoration: none;
font-family: bebasNeue;
font-size: 20px;
vertical-align: center;
text-align: center;
}
<div class="centered">
<button class="button"><span>Buy Now!</span></button>
</div>
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I've this list of buttons
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
}
.special {
font-size: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the font-size moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)
The explanation is that buttons are inline-element, and the text in the button determines the vertical alignment.
The default vertical alignment for inline elements is to place the bottom of characters on the base line of the text. If you look at the buttons in your example, you see that the bottom of the characters line up exactly.
If you add some text around the buttons, you see that the text of the buttons aligns with the text outside the buttons: http://jsfiddle.net/Guffa/q640e8sc/4/
If you specify a different verical alignment for the buttons, they will line up differently. If you for example use vertical-align: middle;, the buttons will line up at the center of the characters, so the edges of the buttons will line up: http://jsfiddle.net/Guffa/q640e8sc/5/
Another way to avoid that alignment is to make the buttons block elements, for example using float: left;. That makes the buttons line up, but it of course make the buttons react differently to surrounding elements: http://jsfiddle.net/Guffa/q640e8sc/6/
Use vertical-align:
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
And to align the text in the middle, you may use line-height.
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
line-height: 16px;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
<button>D</button>
<button>E</button>