#html #css
Вопрос:
Я добавил удивительный значок шрифта в таблицу, используя следующий код.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="d-flex justify-content-center">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Может ли кто-нибудь, пожалуйста, сказать мне, как перенести этот значок в нижнюю строку и в центр этого столбца, т. Е. Одна половина этого значка находится внутри, а другая половина-за пределами таблицы.
Комментарии:
1. где ваш css? что вы пробовали
2. Я попробовал в начальной загрузке
3. Какова ваша версия начальной загрузки? Можете ли вы создать фрагмент кода, чтобы мы могли его отредактировать?
4. Я создал для вас быстрый кодовый код. codeply.com/p/K617Z3ygIw
5. Примените отрицательное поле сверху, используйте относительное позиционирование или преобразуйте:переведите …?
Ответ №1:
Этого можно достичь , установив для содержащего div значение position: relative
и определив для значка position: absolute
и top: 0.375rem
половины padding
содержащего div ( 0.75rem
).
.form-group div {
position: relative
}
a.fa-plus-circle {
position: absolute;
top: 0.375rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="d-flex justify-content-center">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>