Сделать три горизонтальних меню по центру (вертикально и горизонтально)

Question

Всем привет. Нужно сделать три горизонтальних меню по центру div блока Как на рисунке.

Так же переместить знаки наверх. Вировнять по горизонтали смог, как вертикально уже пару дней не получается.

Вот мой код html и css.

body {
    font-family: Arial, sans-serif;
}

.container {
    background: #ffd1f7;
    height: 60%;
    width: 80%;
    outline: 10px double black;
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.container div {
    display: inline-block;
}

ul {
    list-style-type: none;
}

li {
    font-size: 20px;
    float: left;
    text-transform: uppercase;
    margin-right: 50px;
    text-align: center;
}

ul.menuFirst li {
    background: url("../images/checked.png") no-repeat;
    padding-left: 30px;
}

ul.menuFirst li:hover {
    background: url("../images/checked-hover.png") no-repeat;
}

ul.menuThird{
    list-style-image: url("../images/smile.png");
}

ul.menuThird li:hover {
    list-style-image: url("../images/smile-hover.png");
}

<div class="container">
    <div>
        <ul class="menuFirst">
            <li>About</li>
            <li>News</li>
            <li>Teachers</li>
            <li>Programs</li>
            <li>Cost</li>
        </ul>
    </div>
    <div>
        <ul class="menuThird">
            <li>About</li>
            <li>News</li>
            <li>Teachers</li>
            <li>Programs</li>
            <li>Cost</li>
        </ul>
    </div>
</div>

в div контейнере должно быть 3 листа

<div>
    <ul class="menuSecond">
        <li>About</li>
        <li>News</li>
        <li>Teachers</li>
        <li>Programs</li>
        <li>Cost</li>
    </ul>                                                               
</div>

Answer 1

Вот этот блок, свёрстанный на флексбоксах:

body {
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    background: #ffd1f7;
    outline: 10px double black;
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

ul {
    list-style-type: none;
}

li {
    font-size: 20px;
    float: left;
    text-transform: uppercase;
    margin-right: 50px;
    text-align: center;
}

section {
    height: 100%;
}

section:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section:first-child ul {
    display: flex;
    justify-content: space-around;
}

section:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section:last-child ul {
    display: flex;
    justify-content: space-around;
}

<div class="container">
			<section>
				<div class="first">
					<ul>
						<li>About</li>
			            <li>News</li>
			            <li>Teachers</li>
					</ul>
				</div>
				<div class="second">
					<ul>
						<li>About</li>
			            <li>News</li>
			            <li>Teachers</li>
					</ul>
				</div>
				<div class="third">
					<ul>
						<li>About</li>
			            <li>News</li>
			            <li>Teachers</li>
					</ul>
				</div>
			</section>

			<section>
				<div class="first">
					<ul>
						<li>Programs</li>
       					<li>Cost</li>
					</ul>
				</div>
				<div class="second">
					<ul>
						<li>Programs</li>
        				<li>Cost</li>
					</ul>
				</div>
				<div class="third">
					<ul>
						<li>Programs</li>
        				<li>Cost</li>
					</ul>
				</div>
			</section>
		</div>

Думаю, принцип понятен

БЛОГ НА HUSL

Сделать три горизонтальних меню по центру (вертикально и горизонтально)

Ответы (1 шт):