Центрирование текста в html при сохранении его выравнивания влево? - PullRequest
Новая
       24

Центрирование текста в html при сохранении его выравнивания влево?

0 голосов
/ 30 апреля 2020

Я просмотрел много сообщений на эту тему c, но традиционные решения, похоже, не работают. Скорее всего, я делаю что-то не так, но не вижу, что. Я пытаюсь центрировать текст внутри div, сохраняя его выравнивание по левому краю. Вот мой код / ​​разметка:

HTML

<div class="home">
    <div class="title">
        Hi, I'm <a href="#">name</a>.  This is some of my <a href="#">work</a>.
    </div>
</div>

CSS

.home {
    padding: 120px 75px 0px 75px;
    margin: 0 0 200px 0;
    width: calc(100% - 150px);
    height: auto;
    text-align: center;
}
   .title {
   display: inline-block;
   text-align: left;
   color: var(--text-primary);
}

At в тот момент, когда я его настроил, текст внутри заголовка div выравнивается по левому краю, а заголовок div центрируется внутри home div (по крайней мере, я думаю, что именно так и происходит). Я также попробовал flex box, но нет воспользоваться. Я думаю, что проблема связана с тем, что текст в теге h1 переносится, оставляя место справа (выделено красным ниже). Вот что я имею в виду:

Спасибо за внимание, я ценю любые предложения!

Ответы [ 5 ]

0 голосов
/ 03 мая 2020

Мне удалось заставить это работать, "сжимая" заголовок div к тексту, который находится внутри, так, чтобы текст был центрирован внутри него, и затем использовал home div в качестве гибкой рамки, внутри которой заголовок div был в центре. 

.home {
    padding: 5% 0;
    margin-top: 10%;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.title {
    width: max-content;
}

Надеюсь, что это поможет кому-то еще с этой проблемой!

0 голосов
/ 01 мая 2020

Попробуйте указать ширину "home": 100% и "title" margin-left: auto; Маржа правый: авто

0 голосов
/ 30 апреля 2020 
.title {
    display: inline-block;
    text-align: center;
    color: var(--text-primary);
    float:left;
}
0 голосов
/ 30 апреля 2020

Обычно я пробую это, когда хочу центрировать что-либо, поэтому я надеюсь, что это сработает с вами. 

.home{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
0 голосов
/ 30 апреля 2020

Я думаю, тебе это нужно. 

.home {
    padding: 50px 0;
    margin: 0 0 200px 0;
    width: calc(100% - 150px);
    height: auto;
    display: flex;
    justify-content: center;
    background:red;
}
.title {
   display: inline-block;
   color: var(--text-primary);
   background: yellow;
   width: calc(100% - 100px);
   text-align: center;
}
<div class="home">
    <div class="title">
        Hi, I'm <a href="#">name</a>.  This is some of my <a href="#">work</a>.
    </div>
</div>
...