Блог

Главная - Вопросы по программированию - Элемент занимает много места с запасом: 0 авто

Элемент занимает много места с запасом: 0 авто

#html #css

Вопрос:

На моем сайте есть изображения с текстом слева или справа. Я использую margin: 0 auto; для центрирования текста — проблема в том, что текст занимает больше места, чем следует, когда я уменьшаю размер экрана, так что изображение рядом с ним нависает над краем веб-сайтов.

Я хочу как-то центрировать текст, но не потому, что поля просто излишне занимают место. Вот мой код:

 .flex-image-text {
    display: flex;
    justify-content: space-between;

    clear: both;
}

.half-screen {
    max-width: 45%;
    height: 75vh;
    margin-top: 4vh;
    margin-bottom: 4vh;
}

.flex-text {
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.5em;
}

.flex-text-title {
    margin-bottom: 25px;

    line-height: 1.75em;
    letter-spacing: -0.035em;

    font-size: 1.85em;
    font-weight: bold;
}

.flex-text-inner {
    width: 80%;
    line-height: 1.45em;
    
    text-align: justify;
}

.flex-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}


.subarea-show {
    margin-top: 10vh;
    display: flex;
    flex-wrap: wrap;
} 
             <section class="subarea-show">
                <div class="flex-image-text">
                    <div class="flex-image half-screen">
                        <img src="verkehrsrecht/pictures/carcrash2.jpg" alt="">
                    </div>
                    <div class="flex-text half-screen">
                        <h3 class="flex-text-title"><strong>Hilfe bei Verkehrsunfällen</strong></h3>
                        <p class="flex-text-inner">Als Verkehrsteilnehmer, insbesondere als Führer eines Kraftfahrzeuges, sind Sie mit einer Fülle von Vorschriften und Reglementierungen konfrontiert. Diese bewegen sich zum einen im Zivilrecht. Dann geht es beispielsweise um Ansprüche, die sich im Zusammenhang mit einem Verkehrsunfall oder nach dem Kauf eines Gebrauchtwagens ergeben. </p>
                    </div>
                </div>
                <div class="flex-image-text reverse-col">
                    <div class="flex-text half-screen">
                        <h3 class="flex-text-title"><strong>Probleme mit Bußgeld und Führerschein</strong></h3>
                        <p class="flex-text-inner">Manchmal war es nur eine kurze Unachtsamkeit und Sie haben eine Geschwindigkeitsbegrenzung übersehen, wegen der Ihnen nun ein Fahrverbot droht. Oder Sie sollen ein Bußgeld zahlen, obwohl Sie am Tattag gar nicht mit Ihrem Auto unterwegs gewesen sind. In diesen und ähnlichen Fällen rund um Verkehrsordnungswidrigkeiten ist guter Rat oft teuer. </p>
                    </div>
                    <div class="flex-image half-screen">
                        <img src="verkehrsrecht/pictures/driverslicense.jpg" alt="">
                    </div>
                </div>
                <div class="flex-image-text">
                    <div class="flex-image half-screen">
                        <img src="verkehrsrecht/pictures/carpurchase.jpg" alt="">
                    </div>
                    <div class="flex-text half-screen">
                        <h3 class="flex-text-title"><strong>Schwierigkeiten beim bzw. nach dem Autokauf</strong></h3>
                        <p class="flex-text-inner">Wir beraten Sie in allen diesen Fällen im Raum Bamberg umfassend zur jeweils geltenden Rechtslage und Ihren rechtlichen Möglichkeiten, um Ansprüche gegen Autoverkäufer geltend zu machen. Auch können wir Sie dabei unterstützen, unberechtigte Gewährleistungsansprüche eines Autokäufers abzuwehren. Je nach Sachlage vertreten wir Ihre Interessen auch nach außen in der gebotenen Form. </p>
                    </div>
                </div>
            </section>

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

1. Возможно, вам захочется пересмотреть свои методы позиционирования. Я нахожу, что использование position: relative; и простые левые и верхние свойства. Для всего, что нужно центрировать, вы можете использовать left: 50% и transform: translate(-50%, 0) .

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

Метки: