Когда дело доходит до добавления подписей к изображениям на веб-странице, их правильное выравнивание имеет решающее значение для создания чистого и визуально привлекательного дизайна. В этой статье блога мы рассмотрим семь различных методов выравнивания подписей под изображениями, а также приведем примеры кода для каждого метода. Независимо от того, новичок вы или опытный веб-разработчик, вы найдете метод, соответствующий вашим потребностям.

Метод 1: метод Float и Clearfix

<style>
    .image-wrapper {
        float: left;
        margin-right: 10px;
    }
    .image-wrapper::after {
        content: "";
        display: table;
        clear: both;
    }
</style>
<div class="image-wrapper">
    <img src="image.jpg" alt="Image">
    <div class="caption">Caption text goes here</div>
</div>

Метод 2: метод Flexbox

<style>
    .image-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
</style>
<div class="image-container">
    <img src="image.jpg" alt="Image">
    <div class="caption">Caption text goes here</div>
</div>

Метод 3: метод сетки

<style>
    .image-grid {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }
</style>
<div class="image-grid">
    <img src="image.jpg" alt="Image">
    <div class="caption">Caption text goes here</div>
</div>

Метод 4: Табличный метод

<style>
    .image-table {
        display: table;
        text-align: center;
    }
    .image-table > div {
        display: table-row;
    }
    .image-table > div > * {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div class="image-table">
    <div>
        <img src="image.jpg" alt="Image">
    </div>
    <div>
        <div class="caption">Caption text goes here</div>
    </div>
</div>

Метод 5: Метод позиционирования

<style>
    .image-container {
        position: relative;
        text-align: center;
    }
    .image-container img {
        display: block;
        margin: 0 auto;
    }
    .caption {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
    }
</style>
<div class="image-container">
    <img src="image.jpg" alt="Image">
    <div class="caption">Caption text goes here</div>
</div>

Метод 6: метод встроенного блока

<style>
    .image-container {
        text-align: center;
    }
    .image-container img {
        display: inline-block;
        vertical-align: middle;
    }
    .caption {
        display: inline-block;
        text-align: center;
    }
</style>
<div class="image-container">
    <img src="image.jpg" alt="Image">
    <div class="caption">Caption text goes here</div>
</div>

Метод 7: метод CSS Grid

<style>
    .image-grid {
        display: grid;
        grid-template-areas:
            'image'
            'caption';
        text-align: center;
    }
    .image-grid img {
        grid-area: image;
        justify-self: center;
    }
    .image-grid .caption {
        grid-area: caption;
    }
</style>
<div class="image-grid">
    <img src="image.jpg" alt="Image">
    <div class="caption">Caption text goes here</div>
</div>

В этой статье мы рассмотрели семь различных методов выравнивания подписей под изображениями. Каждый метод предлагает уникальный подход, что позволяет вам выбрать тот, который лучше всего соответствует вашим требованиям. Предпочитаете ли вы использовать float и Clearfix, flexbox, сетку, таблицу, позиционирование, встроенный блок или сетку CSS, теперь в вашем распоряжении множество методов для достижения желаемого выравнивания. Поэкспериментируйте с этими методами и найдите тот, который повысит визуальную привлекательность вашего сайта.