Я хочу иметь 2 кнопки по центру посередине с изображением в качестве фона. Для этого я поместил их в таблицу. Я видел несколько способов добавить пространство между ними, но, похоже, ни один из них не работает из-за фона.
Вот моя страница: https://jsfiddle.net/uLhc10zk/1/
button { display: inline-block; height: 300px; padding: 0; margin: 0; vertical-align: top; width: 300px; } #close-CSS { background-image: url("https://s.yimg.com/uu/api/res/1.2/DdytqdFTgtQuxVrHLDdmjQ--~B/aD03MTY7dz0xMDgwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://media-mbst-pub-ue1.s3.amazonaws.com/creatr-uploaded-images/2019-11/7b5b5330-112b-11ea-a77f-7c019be7ecae"); background-size: 300px 300px; height: 300px; width: 300px; } .wrapper { text-align: center; display: table; top: 50%; left: 50%; margin: auto; }
<center>Test Page</center> <br> <br> <br> <div class="wrapper"> <button id="close-CSS" ; onclick="window.location.href = 'about:blank';">Site1</button> <button id="close-CSS" ; onclick="window.location.href = 'about:blank';">Site2</button> </div>
я хочу что-то вроде этого
также есть способ избавиться от границы вокруг картинок?
Пожалуйста, go полегче, я полный новичок
button { display: inline-block; padding: 0; margin: 0; vertical-align: top; width: 300px; border: 0px; margin: 15px; } #close-CSS { background-image: url( "https://s.yimg.com/uu/api/res/1.2/DdytqdFTgtQuxVrHLDdmjQ--~B/aD03MTY7dz0xMDgwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://media-mbst-pub-ue1.s3.amazonaws.com/creatr-uploaded-images/2019-11/7b5b5330-112b-11ea-a77f-7c019be7ecae" ); background-size: 300px 300px; height: 300px; width: 300px; } .wrapper { text-align: center; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; margin: auto; }
<center>Test Page</center> <br> <br> <br> <div class="wrapper"> <button id="close-CSS"; onclick="window.location.href = 'about:blank';">Site1</button> <button id="close-CSS"; onclick="window.location.href = 'about:blank';">Site2</button> </div>
Надеюсь, это поможет