Issue
I need the anchors to be the same height (variable by their text content) and the text to be vertically aligned to the center.
By default the text is at the top, and if I add align-items:center, then they are not the same size...
I get what I need (style) if I use buttons instead of anchors, but I need to use anchors...
I tried height:100%, but it doesn't works.
.container {
width: 200px;
margin: 0 auto;
display: flex;
}
.align {
align-items:center;
}
.anchor {
text-decoration:none;
width: 50%;
text-align:center;
color:inherit;
}
.a {
background-color: rgb(255, 150, 150);
}
.b {
background-color: rgb(150, 255, 150)
}
p {text-align:center;}
<p>Align items center: </p>
<div class="container align">
<a class="anchor a">This is a long text</a>
<a class="anchor b">Text</a>
</div>
<p>No align: </p>
<div class="container">
<a class="anchor a">This is a long text</a>
<a class="anchor b">Text</a>
</div>
<p>Button version works, but I need anchors: </p>
<div class="container">
<button class="anchor a">This is a long text</button >
<button class="anchor b">Text</button >
</div>
<p>-- I need the anchors to be the same height and be vertically aligned --</p>
Solution
You can add a flexbox on .anchor
to stretch your anchor elements. To have the height-stretching effect, you also need to remove .align
styles.
.container {
width: 200px;
margin: 0 auto;
display: flex;
}
.anchor {
text-decoration: none;
width: 50%;
color: inherit;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.a {
background-color: rgb(255, 150, 150);
}
.b {
background-color: rgb(150, 255, 150)
}
p {
text-align: center;
}
<p>Align items center: </p>
<div class="container">
<a class="anchor a">This is a long text</a>
<a class="anchor b">Text</a>
</div>
<p>No align: </p>
<div class="container">
<a class="anchor a">This is a long text</a>
<a class="anchor b">Text</a>
</div>
<p>Button version works, but I need anchors: </p>
<div class="container">
<button class="anchor a">This is a long text</button >
<button class="anchor b">Text</button >
</div>
<p>-- I need the anchors to be the same height and be vertically aligned --</p>
Answered By - Nick Vu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.