У меня есть очень простая html веб-страница, на которой я отображаю две кнопки, содержимое которых представляет собой изображения текста. Кнопки имеют белый фон и золотой контур. Однако теперь у них есть черная полоса, которая выступает с правой стороны каждой кнопки.
Единственный способ, которым я смог их переместить, - это запустить
<button class="button button2" style="vertical-align:middle"><a href=""><img class="chatbutton" src="img/chatbutton.png" />
где атрибут вертикального выравнивания изменился, если полоса находится в нижнем правом углу кнопки или в ее середине.
Мой код:
.button {
border-radius: 12px;
background: white;
border: 4px solid #FFD500;
text-align: center;
padding: 20px;
margin: auto;
overflow: hidden;
}
.button:hover {
background: #FFD500;
outline: medium none;
}
.button1 {
width: 150px;
height: 75px;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.main {
background-color: white;
background: white;
width: 95%;
margin: 0 auto;
text-align: center;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 20px;
border: 2px solid #494A4A;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 480px){
.main {
background-color: white;
width: 50%;
margin: 0 auto;
text-align: center;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 20px;
border: 2px solid #494A4A;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
}
}
<body style="background-color:#494A4A">
<div class="outer">
<div class="middle">
<div class="main">
<button class="button button1" ><a href=""><img
class="filebutton" src="" /></button>
</div>
</div>
</div>
</body>