نمایش نتایج 1 تا 4 از 4

نام تاپیک: وسط چین کردن عمودی یک متن درون عنصری که ارتفاعش مشخص است

  1. #1

    وسط چین کردن عمودی یک متن درون عنصری که ارتفاعش مشخص است

    سلام دوستان خسته نباشید
    ببخشید یک سوال داشتم:


    من یک div دارم که ارتفاع آن ۴۰۰ پیکسل است و درون این div دو div دیگر دارم که درون دومین div یک متن قرار دارد که میخواهم این متن هم به صورت عمودی هم افقی

    در مرکز قرار بگیرد. برای وسط چین افقی مشکلی ندارم اما نمی دونم چطور میتونم عمودی هم راست چین کنم.

    خب البته من میتونم margin-top بهش بدم اما به نظرم میاید این روش راه درستی نیست . چون برای رسپانسیو کردن سایت مشکل درست می کنه
    این کد منه
    ممکنه اگه زحمتی نیست راهنمایی بفرمایید:

    کد HTML:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            .parent{
                height: 400px;
                border: solid blue;
            }
            .put-me-center{
                text-align: center;
                    vertical-align: middle;
            }
        </style>
    </head>
    <body>
    <div class="parent">
        <div class="child1">
            با من کاری نداشته باش من نمی خواهم وسط باشم
        </div>
        <div class="put-me-center">
            <span>
                مرا هم عمودی هم افقی در وسط بگذار
    
            </span>
        </div>
    </div>
    </body>
    </html>
    همان طور که میبینید من سعی کرده ام با vertival-align وسط چین عمودی می کنم اما نتوانسته ام
    خیلی ممنون میشوم راهنمایی بفرمایید
    آخرین ویرایش به وسیله shahin53 : سه شنبه 06 شهریور 1397 در 17:24 عصر

  2. #2
    کاربر دائمی آواتار anvar
    تاریخ عضویت
    آذر 1383
    محل زندگی
    Burbank, California
    پست
    520

    نقل قول: وسط چین کردن عمودی یک متن درون عنصری که ارتفاعش مشخص است

    یه راهش اینه که به کنترل ظرف با کلاس put-me-center زیر رو بدی
    line-height: 400px;

    راه دوم هم اینه که متن رو از span در بیار (span رو کامل پاک کن) و در داخل یک div بذار که اسمش رو میذارم Div فرزند ()

    به کلاس put-me-center خاصیت های زیر رو بده (قواعد css قبلی این کنترل رو کامل پاک کن)
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;

    به Div فرزند هم خاصیت های زیر رو
    text-align: center !important;
    vertical-align: middle !important;
    position: relative;
    display: table-cell;
    float: none;

  3. #3

    نقل قول: وسط چین کردن عمودی یک متن درون عنصری که ارتفاعش مشخص است

    سلام.یه راه دیگه هم هست که والدشو پوزیشن relative بدی بعد به متن پوزیشن absolute بدی.و از بالا ۵۰% فاصله بدی بعد با transform خاصیت translate به اندازه ۵۰% ارتفاع عنصر برش گردونی بالا.
    اینجوری:
    https://www.w3schools.com/css/tryit....lign_transform

  4. #4

    نقل قول: وسط چین کردن عمودی یک متن درون عنصری که ارتفاعش مشخص است

    همانطور که دوستمون در بالا گفتم از position باید استفاده کنی، شاید لینک زیر به دردت بخوره
    https://www.datadars.com/css/css-int...s-positioning/

تاپیک های مشابه

  1. وسط چین کردن متن
    نوشته شده توسط p30online در بخش توسعه وب (Web Development)
    پاسخ: 5
    آخرین پست: یک شنبه 01 شهریور 1394, 00:03 صبح
  2. وسط چین کردن متن در css
    نوشته شده توسط sun2rise در بخش طراحی وب (Web Design)
    پاسخ: 3
    آخرین پست: جمعه 12 اردیبهشت 1393, 13:10 عصر
  3. پاسخ: 1
    آخرین پست: جمعه 27 اردیبهشت 1392, 23:33 عصر
  4. پاسخ: 0
    آخرین پست: شنبه 18 آذر 1391, 11:55 صبح
  5. وسط چین کردن متن داخل lable
    نوشته شده توسط saed2006 در بخش WPF
    پاسخ: 1
    آخرین پست: شنبه 12 اردیبهشت 1388, 18:18 عصر

برچسب های این تاپیک

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •