make header all middle-CodePudding

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  align="center">
    <a href="index.html">
        <img src="pics/icon.png" >
    </a>
    <div >
        <a href="index.html" >
            בית
        </a>
        <a href="" >
            היציע המזרחי
        </a>
        <a href="" >
            חברות
        </a>
        <a href="" >
            תמונות
        </a>
        <a href="" >
            צור קשר
        </a>
    </div>
</div>

CodePudding user response：

Change as below.

HTML

<div >
    <a href="index.html">
        <img src="pics/icon.png" >
    </a>
    <div >
        <a href="index.html" >
            בית
        </a>
        <a href="" >
            היציע המזרחי
        </a>
        <a href="" >
            חברות
        </a>
        <a href="" >
            תמונות
        </a>
        <a href="" >
            צור קשר
        </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

CodePudding user response：

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 >
    <a href="index.html">
        <img src="pics/icon.png" >
    </a>
    <div >
        <a href="index.html" >
            בית
        </a>
        <a href="" >
            היציע המזרחי
        </a>
        <a href="" >
            חברות
        </a>
        <a href="" >
            תמונות
        </a>
        <a href="" >
            צור קשר
        </a>
    </div>
</div>