Wie kann ich die Größe des Kreisradius ändern, um ihn in den Absatz einzupassen?

Ich versuche, den Absatz anzupassen und den Kreisradius zu ändern. Kann mir jemand einen Blick darauf werfen?Wie kann ich die Größe des Kreisradius ändern, um ihn in den Absatz einzupassen?

#circle{ 
 
background:#aaa; 
 
height:300px; 
 
width:300px; 
 
    border-radius:50%; 
 
text-align:center; 
 
    /*line-height:300px;*/ 
 

 
}

<body> 
 
    <div class="container"> 
 
     <div id="circle"> 
 
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div> 
 
    </div> 
 
</body>

Quelle

2016-03-18 Irfan Syed

'Position: center;' ?? – Scott

und '//' ist nicht, wie Sie in CSS auskommentieren, Sie müssen '/ *' und '* /' verwenden, um Kommentare in CSS hinzuzufügen. – Scott

ja die posiiton -Eigenschaft nimmt keinen Wert = "center" und in der codepen.io, die ich diesen Code gemacht hat akzeptiert einige wie akzeptiert diese '//' kommentieren, aber ich werde beginnen mit '/ *' und '* /' –

AKTUALISIERT: Die CSS-Eigenschaft trans Verwenden Sie mit Zentrum Positionierung mit relativ großen Objekten genauer sein können.

Natürlich können Sie Javascript verwenden, um die Höhe des Absatzes zu ermitteln und ihn unabhängig vom Inhalt genau zu positionieren.

Ich habe die Spanne und ein div entfernt, sah keine Notwendigkeit für sie.

.container{ 
 
    background:#aaa; 
 
height:300px; 
 
width:300px; 
 
    border-radius:50%; 
 
text-align:center; 
 
vertical-align: middle; 
 
position: relative; 
 
display: block; 
 
} 
 

 
.container p { 
 
position: absolute; 
 
    
 
top: 47%; 
 
    
 
    /* used 47% rather than 50% 
 
    becuase items tend to "sink" visually, 
 
    so placing it slightly higher is a good thing. */ 
 
    
 
transform: translateY(-50%); 
 

 
}

<body> 
 
    <div class="container"> 
 
    <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p>  </div> 
 
</body>

Quelle

2016-03-18 22:00:24 Scott

Ich glaube nicht, dass Sie die Breite und Höhe des div auf p oder Spanne nur durch css

prüfen aus dem Quellcode und Sie werden sehen, Ihre div abhängen kann, ist Quadrat oder Rechteck es nie Kreis wird es nur als Kreisursache Radius

HTML

<div class="container"> 
     <div id="circle"> 
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div> 
    </div>

01 gezeigt wird

CSS

 #circle{ 
background:#aaa; 
height:auto; 
width:30vw; 
    border-radius:100%; 
text-align:center; 
} 
p{ 
    height:auto; 
width:30vw; 
    border-radius:100%; 
text-align:center; 
    background:red; 

}

Quelle

2016-03-18 21:54:56 Ryuk

Ja, ich stimme zu, dass meine ursprüngliche Form quadratisch/rechteckig war, also mit reinem css wird es nicht funktionieren und muss mit jQuery versuchen, aber möchte noch auf einige weitere Vorschläge warten. –

Ich glaube nicht, dass ich sogar den Code aktualisiere und geben Sie den Randradius für p-Tag und bg ist rot, aber es hat keinen Einfluss auf den Text – Ryuk

Sie Flexbox verwenden können, um die Kopie in Ihrem Kreis und einige padding zum Zentrum hoffentlich enthalten. Bitte beachten Sie, dass Browser-Präfixe für Flexbox verwenden müssen werden, je nachdem, welchen Browser Sie unterstützen müssen (weitere Informationen: http://caniuse.com/#feat=flexbox)

*, *:before, *:after { 
 
    box-sizing:border-box; 
 
} 
 
#circle { 
 
\t background: #aaa; 
 
\t border-radius: 50%; 
 
\t text-align:center; 
 
\t height:300px; 
 
\t width:300px; 
 
\t display:flex; 
 
\t justify-content:center; 
 
\t align-items:center; 
 
\t padding:20px; 
 
}

<div class="container"> 
 
    <div id="circle"> 
 
     <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</p> 
 
    </div> 
 
</div>

Quelle

2016-03-18 22:14:31 Angelique

Wie kann ich die Größe des Kreisradius ändern, um ihn in den Absatz einzupassen?

Antwort

Verwandte Themen