Блог

Главная - Вопросы по программированию - Как выровнять встроенную иконку svg с текстом в boostrap?

Как выровнять встроенную иконку svg с текстом в boostrap?

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

https://jsfiddle.net/a7uxLkyt/

Я просто хочу показать текст и значок в строке. Что я делаю не так? class="d-inline" Правильно ли это?

 <div>
        <div class="d-inline">inline text</div>
        <div title="Test" class="d-inline" style="fill:grey">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M14.7071,1.29289075 .... see fiddle"/>
            </svg>
        </div>          
</div>

Ответ №1:

Ваш код кажется прекрасным! Единственное, что остается, это размер вашего SVG. Пожалуйста, определите его размер или используйте некоторые CSS-коды, такие как:

 svg {
  width: 40px;
}

Ответ №2:

Не могли бы вы, пожалуйста, проверить приведенный ниже код? Надеюсь, это сработает для вас. Мы дали классы bootstrap align-middle и d-inline-block которые будут выравнивать текст и изображение по вертикали, даже если ширина изображения увеличивается (в настоящее время мы указали конкретный width:32px; значок).

Пожалуйста, перейдите по этой ссылке: https://jsfiddle.net/yudizsolutions/1wm7z5y4 /

Метки: