Как расположить текст ровно

Question

У меня есть текст, который должен быть одинаковым, но получается вот так

Как сделать чтобы по высоте они были одинаковыми?

<div class="block-3"> <br>
    <h1 class="block-3-text1"><b><i>Ссылки</i></b></h1> <br><br><br><br>
    <a href=""><h3 class="block-3-text1-2"><b><i>VK</i></b></h3></a> <br><br>
    <a href=""><h3 class="block-3-text1-2"><b><i>Discord</i></b></h3></a> <br><br>
    <a href=""><h3 class="block-3-text1-2"><b><i>Gmail</i></b></h3></a> <br><br>
    <a href=""><h3 class="block-3-text1-2"><b><i>Donate</i></b></h3></a> <br><br>

    <h1 class="block-3-text2"><b><i>Остальное</i></b></h1> <br><br><br><br>
    <a href=""><h3 class="block-3-text2-2"><b><i>Магазин</i></b></h3></a> <br><br>
</div>

.block-3 {
    width: 100%;
    height: 550px;
    background: -webkit-linear-gradient(90deg, rgb(98, 0, 167), rgb(15, 0, 103));
    background: -moz-linear-gradient(90deg, rgb(98, 0, 167), rgb(15, 0, 103));
    background: linear-gradient(90deg, rgb(98, 0, 167), rgb(15, 0, 103));
}

.block-3-text1 {
    font-size: 35px;
    position: absolute;
    left: 10%;
    margin-top: 20px;
    color: white;
}

.block-3-text1-2 {
    font-size: 20px;
    position: absolute;
    left: 10%;
    color: #DCDCDC;
}

.block-3-text2 {
    font-size: 35px;
    position: absolute;
    left: 20%;
    margin-top: 20px;
    color: white;
    margin-left: 50px;
}

.block-3-text2-2 {
    font-size: 20px;
    position: absolute;
    left: 20%;
    color: #DCDCDC;
    margin-left: 50px;
}

Answer 1

В первую очередь убрать теги <br>, убрать такие теги как <i> и <b>, это все можно задавать через css. Так же разделить все на подблоки. Постараться соблюдать логическую(иерархическую) цепочку элементов на странице.

.container {
  width: 100%;
  height: 550px;
  background: -webkit-linear-gradient(90deg, rgb(98, 0, 167), rgb(15, 0, 103));
  background: -moz-linear-gradient(90deg, rgb(98, 0, 167), rgb(15, 0, 103));
  background: linear-gradient(90deg, rgb(98, 0, 167), rgb(15, 0, 103));
  display: flex;
}

.btn{
  color: white ;
  font-size: 20px;
  margin: 0 auto;  /* Я центрировал каждый блок относительно друг друга и body */
  font-style: italic; /* Через css можно задать всему блоку наклон*/
}

.btn a{
  font-size: 20px;
  color: #DCDCDC;  
  text-decoration: none;
}

.btn ul{
  list-style: none;
}

<div class="container">       
        <div class="btn adress">
            <h1>Ссылки</h1> 
            <ul>
                <li><a href="#">VK</a></li>
                <li><a href="#">Discord</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Donate</a></li>
            </ul>
        </div>
        <div class="btn more">
            <h1>Остальное</h1>
            <ul> 
                <li><a href="">Магазин</a></li>
            </ul>
        </div>
    </div>

БЛОГ НА HUSL

Как расположить текст ровно

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