/ ترازبندی وسط در کادر های افقی ! :|
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 5 از 5

موضوع: ترازبندی وسط در کادر های افقی ! :|

  1. #1
    HtmlSoal آنلاین نیست.
    HtmlSoal
    کاربر سايت
    24نوشته2مورد پسند

    تاریخ عضویت
    Dec 2014
    شماره عضویت
    7726
    پسندیده است
    2 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set

    ترازبندی وسط در کادر های افقی ! :|

    علیک.....

    عاقا اگر بخوام یه متن از لحاظ عمودی وسط کادر قرار بگیره چیکار کنم ؟

    من از padding-top استفاده میکنم ولی فکر میکنم استاندارد نباشه و در رزولیشن های مختلف خراب شه !

    حالا با padding-top هم به صورت دیداری هست و دقیق دقیق نیست!

    اگر بخوام مثل این عکس دقیق وسط باشه چیکار کنم ؟

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. نوين وردپرس تبلیغات شما

  3. #2
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    این کار در جدول (table) ها قابل انجام هست اما به لطف css میتونید روی تگ های معمولی html هم پیاده کنید فقط میبایست از خاصیت display: table داخل کلاس مادر و display:table-cell در کلاس زیر مجموعه استفاده کنید و به زیرمجموعه خاصیت vertical-align:middle بدید
    برای درک بهتر برید به ادیتور آنلاین ویکی وی بی :
    wikivb.ir/editor.html
    کد های زیر رو داخلش بزارید تا متوجه عملکرد بشید :
    کد HTML:
    <style>
        .wikivb{width:300px;height:50px;display:table;border:1px solid red}
        .wikivbcenter{display:table-cell;vertical-align:middle;}
    </style>
    
    ​​​​​​<div class="wikivb">
        <div class="wikivbcenter">
            این متن در وسط قرار دارد   
        </div>
    </div>​​​​​​​​​​​​​​​​​​​​​​​​
    پ.ن درضمن این قابلیت بیشتر برای مواقعی هست که ارتفاع کلاس مادر متغیر باشه در غیر اینصورت padding اصلا و ابدا غیر استاندارد نیست

    2 نفر از اعضا پست WikiVB را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #3
    HtmlSoal آنلاین نیست.
    HtmlSoal
    کاربر سايت
    24نوشته2مورد پسند

    تاریخ عضویت
    Dec 2014
    شماره عضویت
    7726
    پسندیده است
    2 پست
    بلاگ
    پست
    میزان امتیاز
    12
    No Set
    حاجی الان اینو تست کن ببین برای چی وسط نمیاد ؟!

    کد:
    <style>
    #menu{
    background:#34495e;
    width:100%;
    height:50px;
    border-top:solid 1px #95a5a6;
    display:table;
    }
    
    .Home{
    float:right;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-right:10%;
    display:table-cell;
    vertical-align:middle;
    }
    
    .About{
    float:right;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-right:2%;
    display:table-cell;
    vertical-align:middle;
    }
    
    .Contact{
    float:right;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-right:2%;
    display:table-cell;
    vertical-align:middle;
    }
    
    .Learn{
    float:left;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-left:10%;
    display:table-cell;
    vertical-align:middle;
    }
    
    .Portfolio{
    float:right;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-right:2%;
    display:table-cell;
    vertical-align:middle;
    }
    
    .Services{
    float:right;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-right:2%;
    display:table-cell;
    vertical-align:middle;
    }
    
    .Other{
    float:left;
    color:#fff;
    font-family:'B Yekan';
    font-size:13px;
    margin-left:2%;
    display:table-cell;
    vertical-align:middle;
    }
    </style>
    
    <div id="menu">
    <div class="Home">صفحه اصلی</div>
    <div class="Services">سرویس ها</div>
    <div class="Portfolio">نمونه کار ها</div>
    <div class="Contact">تماس با ما</div>
    <div class="About">درباره ی ما</div>
    <div class="Learn">مرکز آموزش</div>
    <div class="Other">دیگر خدمات</div>
    </div>
    @WikiVB

  5. #4
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    دلیلش اینه که شما float دادید ! وقتی به کلاسی float داده بشه دیگه align به هیچ عنوان عمل نمیکنه

    2 نفر از اعضا پست WikiVB را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  6. #5
    AbovE آنلاین نیست.
    AbovE
    مدير ارشد
    962نوشته2,771مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1587
    پسندیده است
    988 پست
    بلاگ
    پست
    میزان امتیاز
    2781
    سمینار نه انجمن
    نقل قول نوشته اصلی توسط HtmlSoal نمایش پست ها
    حاجی الان اینو تست کن ببین برای چی وسط نمیاد ؟!
    درود طبق کدهای پست شماره 3 # اگر قصد ساخت یک منو رو دارید به همراه تب درون اون باید بگم ، کدهای شما به هیچ وجه استاندارد نیست .
    برای ساخت لیست هیچگاه نباید از div یا دیویژن استفاده کرد .

    کد:
    <ul> <li></li> </ul>
    تگ های مناسب این کار یو ال مخفف ( unorder list ) و لیست ( list ) هستند ، ضمنأ اگر نیاز دارید که ، هر تب به صورت استاندارد نمایش داده شود بهتر است که آنها را به عنوان یک بلاک کدنویسی کنید .
    درست همونطور که مصطفی جان گفتند ، این کد

    کد:
    display:table-cell;
    و یا

    کد:
    display:inline-block;
    هر دو تب های شما رو به عنوان یک سلول و یا بلاک نمایش می دهند .
    یک نمونه آنلاین : اینجا
    telegram.me/skintheme
    instagram.com/skintheme

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی