Im trying to get the menu icon align left off the menu text, but I'm not really to sure how to do that with my current css, should I try to wrap it up in a grid and use grid to separate them on one side each or should I try using flex to get them inline with eachother?
Here is my html:
#top-button-right {
margin-left: auto;
display: flex;
color: white;
}
#mobile-top-button {
background-color: darkblue;
font-size: 1rem;
text-align: center;
color: white;
}
#mobile-top-open {
fill: white;
}
#mobile-top-close {
display: none;
fill: white;
}<section id="top-button-right">
<button id="mobile-top-button">
<span id="mobile-top-open">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Hamburger-menu-outline-24x24</title>
<rect x="2" y="5" width="20" height="2"></rect>
<rect x="2" y="11" width="20" height="2"></rect>
<rect x="2" y="17" width="20" height="2"></rect>
</svg>
</span>
<span id="mobile-top-close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>close-outline-24x24</title>
<polygon
points="20.71 4.71 19.29 3.29 12 10.59 4.72 3.31 3.31 4.72 10.59 12 3.31 19.28 4.72 20.69 12 13.41 19.28 20.69 20.69 19.28 13.41 12 20.71 4.71"
></polygon>
</svg>
</span>
Meny
</button>
</section>CodePudding user response：
Changed the html a little to make it a little easier, but I got the desired result using flexbox. If it helped you please give it a thumbs up :)
#top-button-right {
margin-left: auto;
display: flex;
color: white;
}
#mobile-top-button {
background-color: darkblue;
font-size: 1rem;
text-align: center;
color: white;
display: flex;
}
#mobile-top-open {
fill: white;
}
#mobile-top-close {
display: none;
fill: white;
}
#mobile-button-wrapper{
fill: white;
display: flex;
width: 30px;
}
#mobile-button-title{
text-align: center;
margin: auto;
margin-left: 5px;
}<section id="top-button-right">
<button id="mobile-top-button">
<div id="mobile-button-wrapper">
<div id="mobile-button-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Hamburger-menu-outline-24x24</title>
<rect x="2" y="5" width="20" height="2"></rect>
<rect x="2" y="11" width="20" height="2"></rect>
<rect x="2" y="17" width="20" height="2"></rect>
</svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Hamburger-menu-outline-24x24</title>
<rect x="2" y="5" width="20" height="2"></rect>
<rect x="2" y="11" width="20" height="2"></rect>
<rect x="2" y="17" width="20" height="2"></rect>
</svg>
</div>
</div>
<div id="mobile-button-title">
<span>Menu</span>
</div>
</button>
</section>CodePudding user response：
You can align svg and text left to right using flexbox using following CSS
#mobile-top-button{
display: flex;
align-items: center;
gap: .5rem;
}
#mobile-top-open svg {
width: 2rem;
height: 2rem;
}
#top-button-right {
margin-left: auto;
display: flex;
color: white;
}
#mobile-top-button {
background-color: darkblue;
font-size: 1rem;
text-align: center;
color: white;
}
#mobile-top-open {
fill: white;
}
#mobile-top-close {
display: none;
fill: white;
}
#mobile-top-button {
display: flex;
align-items: center;
gap: .5rem;
}
#mobile-top-open svg {
width: 2rem;
height: 2rem;
}<section id="top-button-right">
<button id="mobile-top-button">
<span id="mobile-top-open">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Hamburger-menu-outline-24x24</title>
<rect x="2" y="5" width="20" height="2"></rect>
<rect x="2" y="11" width="20" height="2"></rect>
<rect x="2" y="17" width="20" height="2"></rect>
</svg>
</span>
<span id="mobile-top-close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>close-outline-24x24</title>
<polygon points="20.71 4.71 19.29 3.29 12 10.59 4.72 3.31 3.31 4.72 10.59 12 3.31 19.28 4.72 20.69 12 13.41 19.28 20.69 20.69 19.28 13.41 12 20.71 4.71"></polygon>
</svg>
</span>
Meny
</button>
</section>CodePudding user response：
Managed to make it work with this solution! Any pro's/con's using this?
#top-button-right {
margin-left: auto;
display: flex;
color: white;
text-align: center;
}
#mobile-top-button {
background-color: #0054A6;
line-height: 2.5rem;
width: 110px;
color: white;
text-align: center;
font-size: large;
}
.mobile-top-svg {
fill: white;
align-self: center;
height: 1.5em;
width: 1.5em;
position: relative;
top: 0.4em;
}
#mobile-top-open {
display: inline-flex;
}
#mobile-top-close {
display: none;
}<section id="top-button-right">
<button id="mobile-top-button">
<span id="mobile-top-open" class="mobile-top-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>Hamburger-menu-outline-24x24</title>
<rect x="2" y="5" width="20" height="2"></rect>
<rect x="2" y="11" width="20" height="2"></rect>
<rect x="2" y="17" width="20" height="2"></rect>
</svg>
</span>
<span id="mobile-top-close" class="mobile-top-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>close-outline-24x24</title>
<polygon
points="20.71 4.71 19.29 3.29 12 10.59 4.72 3.31 3.31 4.72 10.59 12 3.31 19.28 4.72 20.69 12 13.41 19.28 20.69 20.69 19.28 13.41 12 20.71 4.71"
></polygon>
</svg>
</span>
Meny
</button>
</section>