وسط قرار دادن متن و عناصر توسط css - وسط چین کردن عناصر

وسط چین کردن عناصر Html توسط css

کلا برای وسط چین کردن یک عنصر Html میتونید از دستور زیر استفاده کنید:

text-align : center;

اما دستور بالا عنصر Html شما رو به صورت افقی وسط چین می کند. اما با توجه به اینکه در متن سوال شما مشخص شده که میخواید متن داخل یک label رو وسط چین کنید میتونید از استایل زیر استفاده کنید :

display: flex;
justify-content: center;
flex-direction: column;

یعنی در واقع دستورات شما به طور کامل اینجوری میشه :

<div class="row col-md-12" style="text-align:center; margin-bottom:10px;">
       <label class="control-label col-md-3 col-xs-12" style="float:right; margin:0px; padding:22px; text-align:right; display:flex; flex-direction:column; justify-content:center;">آدرس</label>
       <div class="col-md-8 col-xs-12">
            <textarea id="Address" type="text" style="margin:0px;" class="form-control" placeholder="آدرس..." ></textarea>
       </div>
</div>

الان اگر کد بالا رو اجرا کنید باید "آدرس" دقیقا در وسط label نمایش داده بشه.

در ادامه چند مدل از وسط چین کردن رو مثال می زنم.

وسط چین کردن عناصر به صورت افقی

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

text-align:center;

اگر عنصری داشتید که عرض آن به صورت واضح مشخص شده باشد میتوانید از کد زیر برای وسط چین کردن استفاده کنید. (دقت کنید عنصر استایل float نداشته باشد.)

width: 500px; /* عرض دلخواه */
margin-left: auto;
margin-right: auto;

وسط چین کردن عناصر به صورت عمودی

گاهی می توانید برای وسط چین کردن عنصر به صورت عمودی فقط از یک padding ساده استفاده کنید

padding-top: 30px;
padding-bottom: 30px;

روش دوم برای وسط چین کردن عنصر توسط دستورات css به صورت عمودی استفاده از line-height می باشد

height: 100px;
line-height: 100px;
white-space: nowrap;

گاهی هیچ کدام از روش های بالا جواب نمی دهد و می توانید از display:flex استفاده کنید. این روش در اکثر مواقع پاسخ می دهد.

display: flex;
justify-content: center;
flex-direction: column;

اگر عنصر از نوع block است و ارتفاع مشخص شده از روش زیر استفاده کنید

.parent {
  position: relative;
}

.child {
  position: absolute;
  height: 100px;
  top: 0%;
  bottom: 0%;
  margin-top: auto;
  margin-bottom: auto;
}

اگر ارتفاع عنصر نامشخص باشد می توانید به اندازه نصف ارتفاع پدر را در نظر بگیرید

position: relative;
top: 50%;
transform: translateY(-50%);

حالات زیاد دیگری هم وجود دارد. اما مواردی که در بالا اشاره شد در اکثر موارد پاسخگو می باشد. برای دریافت حالات بیشتر به لینک زیر مراجعه کنید.

وسط قرار دادن عناصر در css