تحديد موقع CSS - العائمة اليسرى والمركز
https://stackoverflow.com/questions/2146145
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا متأكد من أن هذا سؤال أساسي لأولئك الذين يعملون في HTML و CSS بانتظام.
لديّ قطعتان من النص ، كلاهما بحاجة إلى الظهور على نفس الخط - يحتاج المرء إلى ترك محاذاة ، والآخر يحتاج إلى توسيط ، بغض النظر عن مقدار النص الموجود في الكتلة المحاذاة اليسرى (من الواضح أن طول النص المحدد اليساري لا يمتد خلال علامة منتصف الطريق).
لتسهيل الفهم والاختبار ، قمت بتضمين عينة. في العينة ، لدي ما أحتاجه ، ولكن على سطرين بدلاً من نفس الخط.
يرجى إعادة نشر عينة العمل إذا وجدت حلًا.
شكرًا.
<html>
<head>
<title>Alignment Test</title>
<style>
body {background-color: #E6E6E6;}
#reference {width: 100%;
border: solid 1px navy;}
#half1 {width: 50%;
text-align: right;
border-right: dotted 1px navy}
#container {width: 100%;
text-align: center;
border: solid 1px navy;}
#floatLeft {float:left;
border: dotted 1px green;
background-color: #D0F5A9;}
#centered {width: 100%;
border: dotted 1px red;
background-color: #F5F6CE;}
</style>
</head>
<body>
<div id="reference">
<div id="half1">Middle of container --> </div>
<div id="half2"></div>
</div>
<div id="container">
<div id="centered">This text should be centered
<div id="floatLeft">This text should be left aligned</div>
</div>
</div>
</body>
المحلول
<div style="text-align:center;position:relative">
Centered
<div style="position:absolute;left:0;top:0">Left</div>
</div>
نصائح أخرى
ي. إليك آخر ، يتعامل مع المحتوى بأمان أكثر (لا يسمح بالتداخل بين القسم المركزي واليسرى) ، ولكنه يتطلب تغيير ترتيب العناصر في الترميز:
<div style="text-align: center; overflow: auto;">
<div style="float: left; text-align: left;">left</div>
centered
</div>
(ال text-align: left قد لا تحدث فرقًا ، على سبيل المثال ، إذا لم يكن هناك عرض محدد ولا يوجد شيء في الداخل لديه عرض متأصل ، مثل الصورة.)
