Блог

Главная - Вопросы по программированию - Не удается центрировать div после использования макета flex box

Не удается центрировать div после использования макета flex box

#html #flexbox #centering #box

#HTML #flexbox #центрирование #поле

Вопрос:

Я думаю, я делаю что-то довольно тривиальное, совершенно неправильное. Я довольно новичок в CSS и HTML и пытаюсь использовать центрированный ТЕКСТ и изображение в верхней части веб-страницы. Мне удалось использовать макет контейнера flex box, используя 3 поля, но я не могу получить следующий div, центрированный под flex box. Все остальные строки центрируются под 3-м блоком контейнера flex box ..??

проверьте мой код и вывод https://codepen.io/alex1965/pen/eYZLQQG

 <!DOCTYPE html>
<html>
<head>
    <title>Hello Jtronicx</title>
<style>
    /*default version*/
    @font-face {
        font-family:"Jtronicxfont";
        src: url("fonts/alien-encounters-regular.ttf");
        font-weight:normal;
              }
    /*bold version*/
    @font-face {
        font-family:"Jtronicxfont";
        src: url("fonts/alien-encounters-bold.ttf");
        font-weight:bold;       
              }
    body {
        background-color: black;
    }
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  writing-mode: horizontal-tb;
  justify-content: center;
  background-color: black;
}

.flex-container > div {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
   }
#company{
        color: DarkKhaki;
        text-align: center;
        font-family:"Jtronicxfont";
        font-weight: bold;
        font-size:90px;
        margin-bottom:2px;
        }
a:link, a:visited {
        text-decoration: none;
    background-color: rgb(38, 31, 5);
    color: DarkKhaki;  
    font-family:"Jtronicxfont";
    font-weight:normal;
    font-size: 130%;
    text-align: center;
    display:block;
    width:200px;
    padding: 3px;
    border: 1px solid rgb(117, 104, 50);
    border-radius: 13px;
    margin-bottom:2px;
  }
a:hover {
    background-color: rgb(45, 37, 5);
    color: Khaki;
    cursor:pointer;
    }

div {
    display:block;
    text-align:center;
    color:DarkKhaki;
    font-family:"Arial";
    font-weight: normal;
    font-size:20px;     
}

</style>
</head>
<body>
    <div class="flex-container">
        <div></div>
        <div id="company" style="flex-basis: 600px">Jtronicx bv</div>
        <div><img src="jtronicx.jpg" width="80" height="70"><div>  
    </div>
    <div class="offerings">
        <div>industrial business development</div>
        <div>proof of concepts</div>
        <div>electronics integration</div>
        <div>web design</div>
    <div>   
<ul>
    <li><a href="http://www.jtronicx.com">Company</a></li>
    <li><a href="http://www.jtronicx.com">What I offer</a></li>
    <li><a href="http://www.jtronicx.com">Projects</a></li>
    <Li><a href="http://www.jtronicx.com">Contact</a></Li>
</ul>   
  
</body>
</html>

Ответ №1:

Основная проблема заключается в том, что вы используете <div> теги, в которых </div> ожидается закрытие.

введите описание изображения здесь

Комментарии:

1. Привет, Франциско… Ну, это решено. И я просматривал свой код более 1 часа… Боже, как глупо! Спасибо!!!!