Центрування тексту як горизонтально, так і вертикально всередині блоку div Це важливо для створення візуально привабливих макетів. Різні методи, такі як flexbox, grid і перетворення CSS, пропонують рішення з явними перевагами та недоліками. У цій статті розглядаються ці загальні підходи до досягнення центрування тексту в блоках div.
Зміст
fmovies
- Використання Flexbox
- Використання Grid
- Використання вирівнювання тексту
- Використання комірки таблиці
- Використання властивості Transform
Використання Flexbox:
- Установіть для батьківського контейнера значення дисплей: гнучкий; Це дозволяє використовувати a flexbox і перетворює батьківський контейнер на гнучкий контейнер.
- використання justify-content: центр щоб відцентрувати дочірній елемент горизонтально всередині батьківського контейнера.
- використання align-items: центр щоб центрувати дочірній елемент вертикально всередині батьківського контейнера.
приклад: У цьому прикладі показано, як центрувати текст усередині div за допомогою властивості flexbox CSS .
HTML Центрувати текст горизонтально та вертикально всередині заголовка блоку div><style>тіло { вирівнювання тексту: центр; } .container {висота: 300px; ширина: 645 пікселів; дисплей: гнучкий; justify-content: центр; align-items: center; рамка: 2 пікселя суцільний чорний; } h1 { колір: зелений; } стиль> голова> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Використання Grid</span></h2><ul><li value='1'> <span>Сітка CSS</span> <span>це ще один популярний інструмент макета, який дозволяє створювати складні та гнучкі макети на основі сітки.</span></li><li value='2'><span>Установіть для батьківського контейнера значення</span> <b> <strong>дисплей: сітка</strong> </b> <span>. Це дозволяє використовувати сітку CSS і перетворює батьківський контейнер на контейнер сітки.</span></li><li value='3'><span>Використовувати</span> <b> <strong> </strong> </b> <b> <strong>місце-предмети: центр</strong> </b> <span>властивість центрувати дочірній елемент як горизонтально, так і вертикально в клітинці сітки. Ця властивість є скороченням для обох</span> <b> <strong>вирівняти елементи</strong> </b> <span>і</span> <b> <strong>align-items</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>У цьому прикладі показано, як центрувати текст усередині div за допомогою властивості grid CSS.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Центрувати текст горизонтально та вертикально всередині заголовка блоку div><style>.container {висота: 300px; ширина: 645 пікселів; дисплей: сітка; місце-пункти: центр; рамка: 2 пікселя суцільний чорний; } h1 { колір: зелений; } стиль> голова> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Використання вирівнювання тексту:</strong> </b> </h2><ul><li value='1'><span>The</span> <span>вирівнювання тексту</span> <span>Властивість — це простий і зрозумілий спосіб відцентрувати текст горизонтально всередині блоку div.</span></li><li value='2'><span>Установіть для батьківського контейнера значення</span> <b> <strong>вирівнювання тексту: по центру.</strong> </b> <span>Це центрує дочірній елемент горизонтально всередині батьківського контейнера.</span></li><li value='3'><span>використання</span> <b> <strong>висота лінії:</strong> </b> <span>щоб центрувати дочірній елемент вертикально всередині батьківського контейнера. Значення має дорівнювати висоті батьківського контейнера.</span></li></ul><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>У цьому прикладі показано, як центрувати текст усередині div за допомогою вирівнювання тексту CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Центрувати текст горизонтально та вертикально всередині заголовка блоку div><style>.container {висота: 300px; ширина: 645 пікселів; вирівнювання тексту: центр; line-height: 400px; рамка: 2 пікселя суцільний чорний; } h1 { колір: зелений; } стиль> голова> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Використання комірки таблиці</span></h2><ul><li value='1'><span>Установіть для батьківського контейнера значення</span> <b> <strong>дисплей: табл.</strong> </b> <span>Це емулює поведінку таблиці.</span></li><li value='2'><span>Установіть для дочірнього елемента значення</span> <b> <strong>дисплей: таблиця-комірка</strong> </b> <span>. Це емулює поведінку клітинки таблиці.</span></li><li value='3'><span>використання</span> <b> <strong>вертикальне вирівнювання: посередині</strong> </b> <span>щоб центрувати дочірній елемент вертикально всередині батьківського контейнера.</span></li><li value='4'><span>використання</span> <b> <strong>вирівнювання тексту: по центру</strong> </b> <span>щоб відцентрувати дочірній елемент горизонтально всередині батьківського контейнера.</span></li></ul><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>У цьому прикладі показано, як центрувати текст усередині div за допомогою клітинки текстової таблиці CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Центрувати текст горизонтально та вертикально всередині заголовка блоку div><style>.container {висота: 300px; ширина: 645 пікселів; дисплей: таблиця-комірка; вирівнювання тексту: центр; вертикальне вирівнювання: посередині; рамка: 2 пікселя суцільний чорний; } h1 { колір: зелений; } стиль> голова> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Використання властивості Transform:</span></h2><ul><li value='1'><span>Установіть для батьківського контейнера значення</span> <b> <strong>положення: відносне.</strong> </b> <span>Це дозволяє використовувати абсолютне позиціонування для дочірнього елемента.</span></li><li value='2'><span>Установіть для дочірнього елемента значення</span> <b> <strong>позиція: абсолютна.</strong> </b> <span>Це дозволяє використовувати абсолютне позиціонування для дочірнього елемента.</span></li><li value='3'><span>Встановіть дочірній елемент</span> <b> <strong>зверху</strong> </b> <span>і</span> <b> <strong>зліва</strong> </b> <span>властивості до</span> <b> <strong>п'ятдесят%</strong> </b> <span>. Це розташує дочірній елемент у центрі батьківського контейнера.</span></li><li value='4'><span>використання</span> <b> <strong>перетворення: переклад (-50%, -50%)</strong> </b> <span>центрувати дочірній елемент як горизонтально, так і вертикально.</span></li></ul><p dir='ltr'> <b> <strong>приклад:</strong> </b> <span>У цьому прикладі показано, як центрувати текст усередині div за допомогою властивості transform CSS.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-compareto">метод java compareto</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Центрувати текст горизонтально та вертикально всередині заголовка блоку div><style>.container {висота: 300px; ширина: 645 пікселів; положення: відносне; рамка: 2 пікселя суцільний чорний; } h1 { позиція: абсолютна; зверху: 50%; колір: зелений; зліва: 50%; transform: translate(-50%, -50%); } стиль> голова> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Загалом, обраний підхід залежатиме від конкретного випадку використання, сумісності з іншими елементами та бажаної естетики дизайну. За допомогою цих методів можна досягти центрованого текстового блоку в різноманітних макетах і дизайнах.</span></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-turtle/">Пітон-Черепаха</a> </li><li> <a href="/bit-magic/">Bit Magic</a> </li><li> <a href="/chemistry-class-9-cat/">Хімія-9 Клас</a> </li><li> <a href="/c-map-function/">Функція Відображення C++</a> </li><li> <a href="/python-pil/">Пітон-Таблетка</a> </li><li> <a href="/math-concepts/">Математичні Поняття</a> </li><li> <a href="/computer-network/">Комп'ютерна Мережа</a> </li><li> <a href="/java-integer/">Java-Integer</a> </li><li> <a href="/css-tutorial/">Підручник Css</a> </li><li> <a href="/java-jsp/">Java-Jsp</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Різниця між сполукою та сумішшю</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Ключова відмінність між сполукою та сумішшю полягає в тому, що сполука - це хімічна комбінація двох або більше елементів, тоді як суміш утворюється шляхом фізичного змішування двох або більше речовин. Дізнайтеся більше про сполуки та суміші, їхні властивості, поширені запитання та відмінності між ними!</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-compound"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/difference-between-supermarket">Різниця між супермаркетом і гіпермаркетом</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/one-billion-million">Один мільярд на мільйон</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-modulo">Модуль Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/knapsack/">Рюкзак</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-write-stand-outwhy-columbiaessay-1311106">Як написати яскраве есе на тему «Чому Колумбія».</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/c-array-structures">масив структури мовою c</a>
</li><li><a href="/java-convert-char-string">як перетворити char на рядок</a>
</li><li><a href="/java-list">списки java</a>
</li><li><a href="/java-convert-int-string">java int у рядку</a>
</li><li><a href="/300-core-java-interview-questions-set-1">основні питання співбесіди java</a>
</li><li><a href="/java-main-method">java main</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Всі Права Захищені | <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>