I have this div in my HTML file:
.aboutme_bar {
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 30px;
background: lightgray;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0, 33s ease-in-out;
}
.aboutme_bar_text {
display: flex;
align-items: center;
justify-content: center;
margin-left: 240px;
}
.aboutme_bar_btns {
display: flex;
justify-content: space-around;
align-items: center;
margin-left: 10px;
}
<div class="aboutme_bar">
<div class="aboutme_bar_btns">
<div class="aboutme_bar_btn aboutme_bar_btn_close"></div>
<div class="aboutme_bar_btn aboutme_bar_btn_mini"></div>
<div class="aboutme_bar_btn aboutme_bar_btn_resize"></div>
<div class="aboutme_bar_text">AboutMe.txt</div>
</div>
</div>
I am having trouble because when the maximise button is clicked, the div increases in size. When this happens the text is not centered. Is there a way for the text to remain centered even if the size of the div is altered?
I am new to HTML and CSS so any and all comments appreciated. Thanks.
2
Answers
If you want the text to be always at center irrespective of other div inside then you can use position absolute to center it.
Hope it helps.