1

Проблема в том что не получается отцентрировать текст относительно изображения в середине. Далее набросок в PS, CSS, разметка и то что получается.

наброски в PS

body {
  font-family: Source Code Pro;
  background: hsl(240, 100%, 30%);
}
#header {
  text-align: center;
}
.columns {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 60vh;
}
.column {
  display: block;
  flex-basis: 200px;
  height: 200px;
}
span {
  font-size: 14pt;
  background: black;
  line-height: 25px;
  display: inline-block;
}
#projects {
  align-self: flex-start;
  color: #33ff33;
}
#contacts {
  align-self: flex-start;
  color: #ff33ff;
}
#logo {
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .columns {
    flex-direction: column;
    height: 100vh;
  }
}
<div class="container">
    <div class="columns">
      <div
        id="projects"
        class="column"
      ><span id="projects-title">My projects:</span>
        <ul>
          <li>Test1</li>
          <li>Test1222</li>
          <li>Test1</li>
          <li>Test1</li>
        </ul>
      </div>
      <div
        id="center"
        class="column"
      > <img
          id="logo"
          src="~/assets/logo.png"
        />
      </div>
      <div
        id="contacts"
        class="column"
      ><span>My contacts:</span>
        <ul>
          <li>Telegram</li>
          <li>Github</li>
          <li>Discord</li>
          <li>Linkindin</li>
        </ul>
      </div>
    </div>
  </div>

Получается вот так: введите сюда описание изображения

В мобильном дизайне такая-же проблема: введите сюда описание изображения

1 ответ 1

1

body {
  font-family: Source Code Pro;
  background: hsl(240, 100%, 30%);
}

ul,
li {
  margin: 0;
  padding: 0;
}

#header {
  text-align: center;
}

.container {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
}

.columns,
.column {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

span {
  font-size: 14pt;
  background: black;
  line-height: 25px;
  display: inline-block;
}

#projects {
  flex-flow: column nowrap;
  color: #33ff33;
}

#contacts {
  flex-flow: column nowrap;
  color: #ff33ff;
}

img {
  max-height: 200px;
}

@media screen and (max-width: 768px) {
  .container {
    height: auto;
  }
  .columns,
  .column {
    flex-flow: column nowrap;
    padding: 20px 0;
  }
}
<div class="container">
  <div class="columns">
    <div id="projects" class="column"><span id="projects-title">My projects:</span>
      <ul>
        <li>Test1</li>
        <li>Test1222</li>
        <li>Test1</li>
        <li>Test1</li>
      </ul>
    </div>
    <div id="center" class="column"> <img id="logo" src="https://png.rinvik.ru/files/Narisovannaya-golova-leoparda-vid-speredi-s-otkrytoj-pastyu.png" />
    </div>
    <div id="contacts" class="column"><span>My contacts:</span>
      <ul>
        <li>Telegram</li>
        <li>Github</li>
        <li>Discord</li>
        <li>Linkindin</li>
      </ul>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.