در وسط قرار دادن (به صورت افقی) یک عنصر بلوکی (Block Element) (مثل div)، با مشخصه margin:auto ، در CSS
چنانچه یک عنصر بلوکی (Block Element) (مثل div) در صفحه HTML داشته باشیم، برای آنکه آن را به صورت افقی در وسط قرار بدهیم، باید مشخصه margin را به صورت زیر برای آن ذکر نماییم :
در این حالت، عنصری که قصد داریم در وسط قرار بگیرد، باید دارای عرضی (width) کمتر از عنصر قرار گرفته در سطح بالاتر از خود باشد (یعنی از نظر عرض، از عنصر قرار گرفته در آن، کوچکتر باشد).
به مثال زیر توجه کنید :
کد کامل صفحه HTML :
در صفحه HTML ، یک تگ div با id برابر kelidestan تعریف کرده ایم :
سپس در کدهای CSS ، آن تگ div را بر اساس id آن، شناسایی کرده و مشخصه هایی را برای آن تعیین نموده ایم :
با استفاده از مشخصه background-color:#0F0 ، رنگ پس زمینه تگ div را برابر رنگ سبز قرار داده ایم تا بتوانیم آن را از سایر بخش های صفحه تشخیص بدهیم. همچنین با مشخصه width:30% ، عرض تگ div را برابر 30 درصد عرض عنصر سطج بالاتر (در اینجا تگ body) قرار داده ایم تا از عنصر سطح بالاتر خود کوچکتر باشد و بتواند در وسط آن قرار بگیرد.
مشخصه margin:auto باعث می شود که تگ div در وسط عنصر سطح بالاتر خود (در اینجا تگ body)، قرار بگیرد.
نتیجه :
