Wie kann ich Folgendes perfekt zentrieren?

Question

.about img { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 40%; 
 
    margin-top: 5%; 
 
    width: 15%; 
 
    height: auto; 
 
} 
 

 
.about p { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 30%; 
 
    margin-top: 30%; 
 
    text-align: center; 
 
    font-family: Bree; 
 
    font-size: 1.3vw; 
 
}

<section> 
 
    <div class="about"> 
 
    <img src="images/test.png" alt="test" height="300" width="300"> 
 
    <p>Text on line one<br>Text on line 2<br>Text on line 3</p> 
 
    </div> 
 
</section>

Dies ist, was ich versucht habe, mit dieser Methode habe ich versucht, es so perfekt wie möglich zu zentrieren, aber ich möchte einen Weg wissen, dass es perfekt zu zentrieren, weil jetzt ist es nur perfekt auf meine eigener Bildschirm

Answer 1

Sie können dies einfach tun:

.about { 
 
    margin: 5% auto 0; 
 
    width: 15%; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
} 
 

 
.about p { 
 
    font-family: Bree; 
 
    font-size: 1.3vw; 
 
}

<section> 
 
    <div class="about"> 
 
    <img src="https://lorempixel.com/300/300/" alt="test"> 
 
    <p>Text on line one<br>Text on line 2<br>Text on line 3</p> 
 
    </div> 
 
</section>

Answer 2

Meine Lieblingsmethode ist Flex-Box. Here ist eine ziemlich einfache Anleitung, aber hier ist ein kurzer Überblick.

können Sie ein Element geben, das

display: flex; 

Eigenschaft. Jetzt gibt es eine Achse, auf der Sie die Dinge ausrichten können. Also sagen Sie, dass Sie etwas sowohl horizontal als auch vertikal zentrieren wollen. Sie würden dies tun:

.surrounding { 
    display: flex; 
    flex-direction: row; /* This is also default, but I like having it anyway*/ 
    justify-content: center; /* This centers along the main axis, as in the flex direction. */ 
    align-items: center; /* This centers across the main axis, as in vertically, since our main axis is horizontal. */ 
} 

Jetzt ist alles innerhalb des Elements, das die "umgebenden" Klasse hat, sowohl horizontal als auch vertikal zentriert.

Answer 3

Mit flex wird Ihr Leben leichter machen:

.about { 
    width: 100% 
    display:flex 
    flex-direction: row 
    align-items: center 
    justify-content: space-between 
} 

Dann brauchen Sie nicht die absolute Positionierung auf img und p-Tag, können Sie all das entfernen.

Answer 4

Seien Sie vorsichtig mit der Verwendung position: absolute;, wenn Sie es verwenden, sollten Sie immer Wrapper mit position: relative; verwenden. Es wird eine Beziehung zwischen zwei Elementen geschaffen. Zum Beispiel:

.wrap { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #000; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    /* START absolute centering */ 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    /* END absolute centering */ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #ff0; 
 
}

<div class="wrap"> 
 
    <div class="box"></div> 
 
</div>