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
Related
I'm new to prgramming. I'm trying to align the multiple buttons on top to the center of the page, I have tried text-align and margin: 0; none of which have worked. Now, I have centered the buttons but the buttons are below each other. Is there any fix to this? How exactly do I center it? I'm using flask.
CSS:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
width: 43%;
padding: 5px;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
border: none;
outline: none;
background-color: transparent;
color: #606060;
top: 30px;
font-size: 27px;
font-family: 'Roboto', sans-serif;
width: 40%;
margin-left: 30%;
margin-right: 30%;
}
This is the image. The border is aligned to the center and is supposed to contain the buttons next to each other as a Nav bar. I want each of the buttons to be centered too. I want all the buttons to be centered at the same place and then I will move each button individually to the left and right. But if you know a way to center all of them side by side, please let me know.
you have some problems in your CSS code that prevent you to reach your goal:
each button has a big margin on left-right, which makes it so that not enough items can fit in a single row
when you set each button size as percent, it refers to the parent element. if you have more than 2 buttons with 40% width, they will overflow the row to the next one.
about how to style multiple elements at the same time: Right now, you style each button based on its id, which is unique. But classes can be applied to multiple elements simultaneously, giving them all the same styling. So Instead of styling through ids (with #), I'm styling based on .btn, which tells the CSS to style everything with the class (represented by a dot) that's called btn
I also set display: flex, align-items: center, and justify-content: center on the parent element to tell it to align all items to center both horizontally and vertically.
so, here's a demo:
#navBar {
border: 2px solid black;
margin: auto;
height: 30px;
min-width: 43%;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
}
#searchInput {
position: absolute;
top: 20px;
right: 0;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
/* The buttons that I want to be centered */
.btn {
border: none;
outline: none;
background-color: transparent;
color: #606060;
font-size: 27px;
font-family: 'Roboto', sans-serif;
/* used to show a line seperator */
padding: 0 0.5em;
border-right: 2px solid black;
}
/* Remove border for last item */
.btn:last-of-type {
border-right: none;
}
<nav id="navBar">
<a class="btn">Deals</a>
<a class="btn">Burgers</a>
<a class="btn">Drinks</a>
<a class="btn">Sides</a>
<a class="btn">Desserts</a>
</nav>
I am using icoMoon fonts (https://icomoon.io/) and centre aligning horizontally and vertically inside circle. Its looking in centre in 100% and 80% of browser but when < 80% the icon is not aligning properly. Simliar case, with > 100% of browser(chrome);
Attaching screenshots:-
.uniIcon {
height: 18px;
width: 18px;
line-height: 18px;
border-radius: 100%;
text-align: center;
float: left;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.iconmoon-icon-files {
font-size: 12px;
color: #FFF;
vertical-align: sub;
padding-left: 1px;
}
<div class="uniIcon" style="background-color: #161620;"><i class="iconmoon-icon-files"></i></div>
Try setting line height for icons to align them in div center, something like
.iconmoon-icon-files {
font-size: 12px;
color: #FFF;
line-height:inherit;
}
Inherit will make line-height of icon take on the height of its containing div.
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>
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.
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle