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 you have read our privacy policy.

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