Issue
I'm creating an interface of type test, and I'm asking about a div.
[html]
<body>
<div class="top_header">
<div class="top_header_logo">test</div>
<div class="top_header_product">test</div>
<div class="top_header_manual">test</div>
</body>
[css]
body {
margin: 0px auto;
padding: 0px;
}
.top_header {
border: 1px solid gainsboro;
height: 70px;
display: flex;
align-items: center;
}
.top_header_logo {
border: 1px solid blue;
float: left;
width: 20%;
height: 70px;
box-sizing: border-box;
text-align: center;
/* margin-top: 20px; */
font-family: 'Bungee', sans-serif;
font-size: 20px;
}
.top_header_product {
border: 1px solid red;
float: left;
width: 20%;
height: 70px;
box-sizing: border-box;
text-align :center;
margin-top: 20px;
font-family: 'Bungee', sans-serif;
font-size: 20px;
}
.top_header_product:hover {
color: cornflowerblue;
}
.top_header_manual {
float: left;
width: 20%;
height: 70px;
box-sizing: border-box;
text-align: center;
margin-top: 20px;
font-family: 'Bungee', sans-serif;
font-size: 20px;
}
.top_header_empty {
width: 17%;
float: left;
height: 70px;
}
I want the 3 tests to be centered horizontally and vertically to match the size of the parent. I tried text-align/flex and it didn't give me good results. Do you have any feedback?
Solution
you need to add justify-content: center;
to .top_header
also no need for float:left
since flex items will be auto-aligned to each other. Also to see the vertical alignment flex-items
visually you need to add a specific height for your flexbox, which is top_header
.
body {
margin: 0px auto;
padding: 0px;
}
.top_header {
border: 1px solid gainsboro;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.top_header_logo {
border: 1px solid blue;
width: 20%;
height: 70px;
box-sizing: border-box;
text-align: center;
font-family: 'Bungee', sans-serif;
font-size: 20px;
}
.top_header_product {
border: 1px solid red;
width: 20%;
height: 70px;
box-sizing: border-box;
text-align :center;
font-family: 'Bungee', sans-serif;
font-size: 20px;
}
.top_header_product:hover {
color: cornflowerblue;
}
.top_header_manual {
width: 20%;
height: 70px;
box-sizing: border-box;
text-align: center;
font-family: 'Bungee', sans-serif;
font-size: 20px;
}
.top_header_empty {
width: 17%;
float: left;
height: 70px;
}
<body>
<div class="top_header">
<div class="top_header_logo">test</div>
<div class="top_header_product">test</div>
<div class="top_header_manual">test</div>
</div>
</body>
Answered By - sumeshsn1
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.