Ubuntu - make header all middle

Daniel
July 15, 2022
63 views
0 votes
2 Answers

I want to put all the header (text and pic) on the same line and in the middle of the header, but only the pic stay in the middle and no matter what I do the text still stay at the bottom of the header, someone maybe know how to solve it?

body {
    direction: rtl;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* להשיג רישיון לפונט SPECTRUM FM */
}

.header {
    background-color: rgb(209, 45, 33);
}

.icon {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 150px;
    padding-left: 10px;
}
.icon:hover {
    width: 170px;
    transition: 0.5s;
}

.headTxt {
    font-weight: bold;
    font-size: 35px;
    color: rgb(234, 234, 234);
    padding: 10px;
    margin-bottom: 50px;
}
.headTxt:link {
    text-decoration: none;
}
.headTxt:hover {
    color: black;
    font-size: 40px;
    transition: 0.5s;
}

.divHeader {
    display: inline-block;
}

<div class="header" align="center">
    <a href="index.html">
        <img src="pics/icon.png" class="icon divHeader">
    </a>
    <div class="divHeader">
        <a href="index.html" class="headTxt">
            בית
        </a>
        <a href="" class="headTxt">
            היציע המזרחי
        </a>
        <a href="" class="headTxt">
            חברות
        </a>
        <a href="" class="headTxt">
            תמונות
        </a>
        <a href="" class="headTxt">
            צור קשר
        </a>
    </div>
</div>

Tags: css html

Answers

Change as below.

HTML

<div class="header">
    <a href="index.html">
        <img src="pics/icon.png" class="icon divHeader">
    </a>
    <div class="divHeader">
        <a href="index.html" class="headTxt">
            בית
        </a>
        <a href="" class="headTxt">
            היציע המזרחי
        </a>
        <a href="" class="headTxt">
            חברות
        </a>
        <a href="" class="headTxt">
            תמונות
        </a>
        <a href="" class="headTxt">
            צור קשר
        </a>
    </div>
</div>

CSS

body {
    direction: rtl;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',             
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans- 
serif;
    /* להשיג רישיון לפונט SPECTRUM FM */
    }

.header {
    background-color: rgb(209, 45, 33);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 150px;
    padding-left: 10px;
}
.icon:hover {
    width: 170px;
    transition: 0.5s;
}
.headTxt {
    font-weight: bold;
    font-size: 35px;
    color: rgb(234, 234, 234);
    padding: 10px;
    margin-bottom: 50px;
}
.headTxt:link {
    text-decoration: none;
}
.headTxt:hover {
    color: black;
    font-size: 40px;
    transition: 0.5s;
}
.divHeader {
    display: inline-block;
}

Output

body {
    direction: rtl;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',             
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans- 
serif;
    /* להשיג רישיון לפונט SPECTRUM FM */
    }

.header {
    background-color: rgb(209, 45, 33);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}

.icon {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 150px;
    padding-left: 10px;
}
.icon:hover {
    width: 170px;
    transition: 0.5s;
}
.headTxt {
    font-weight: bold;
    font-size: 35px;
    color: rgb(234, 234, 234);
    padding: 10px;
    margin-bottom: 50px;
}
.headTxt:link {
    text-decoration: none;
}
.headTxt:hover {
    color: black;
    font-size: 40px;
    transition: 0.5s;
}
.divHeader {
    display: inline-block;
}

<div class="header">
    <a href="index.html">
        <img src="pics/icon.png" class="icon divHeader">
    </a>
    <div class="divHeader">
        <a href="index.html" class="headTxt">
            בית
        </a>
        <a href="" class="headTxt">
            היציע המזרחי
        </a>
        <a href="" class="headTxt">
            חברות
        </a>
        <a href="" class="headTxt">
            תמונות
        </a>
        <a href="" class="headTxt">
            צור קשר
        </a>
    </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Ubuntu – make header all middle

Answers