مركز النسبية النص إلى المساحة المتوفرة في CSS

Question

<div style="width: 300px">
<div id="one" style="float: left">saved</div><input type="submit" id="two" style="float: right" value="Submit" />
</div>

وأود شعبة # واحد أن تركز في الفضاء بين الحافة اليسرى للشعبة الأم والحافة اليسرى من على زر الإرسال.

Answer 1

وهناك عدد قليل من الطرق لفعل ذلك:

<div style="width: 300px">
    <input type="submit" id="two" style="float: right" value="Submit" />
    <div id="one" style="text-align:center;">saved</div>
</div>

وانه من الصعب ان اقول ان saved النص لا تتركز بين الحافة اليسرى للdiv الحاويات والحافة اليسرى من على زر الإرسال.

وهنا هو نسخة بالضبط ما سبق:

<div style="width: 300px;">
    <input type="submit" id="two" style="float: right; width:64px;" value="Submit" />
    <div id="one" style="text-align:center;margin-right:64px;">saved</div>
</div>

Answer 2

وهناك عدد من التقنيات المدرجة هنا

ولكن، إذا كنت ببساطة يريد "إنقاذ" النص إلى أن تركز، أعتقد أنك سوف تحتاج إلى إعطاء العرض إلى #one، منها مثلا.

<div style="width: 300px">
<div id="one" style="float: left;text-align:center;width:80%">saved</div>
<input type="submit" id="two" style="float: right;width:20%" value="Submit" />
</div>

Answer 3

وهذا مثال من مشكلة عامة مع CSS، وهو أن ليس هناك طريقة لحساب "المساحة المتبقية في مختلف التصاميم.

ولقد واجهت الحالات التي (أ) تحتاج إلى تخطيط دقيق، و (ب) حيث كنت لا تعرف حجم هذا البند العائمة.

مثال:

<اقتباس فقرة>   

[---- حقل إدخال يأخذ 100٪ من المساحة المتبقية ----] [زر من عرض غير معروف]

وأنت أعتقد أن هذا ممكن، ولكن AFAIK، لديك لاستخدام الجداول لتحقيق ذلك. ليس هناك حتى اقتراح في CSS لكيف سيتم إصلاح هذا في المستقبل. تنفس الصعداء