CSS element is not in row - html

Question

.slide{
display: block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<a class="slide"><</a>
<a class="slide">></a>
Please help me How can I add both buttons in the same row with the center align? Right now button 1 is on top and button 2 is in the footer. How can I resolve this issue?

Answer 1

I advise you to use flexbox, it's a very good tool to align items and make responsive web pages. You can find guides here or here, that are very clear and will give you the good practices.
.container{
display:flex;
justify-content:center;
}
.slide{
display: block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin-left: 5px;
margin-right: 5px;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<div class="container">
<a class="slide"><</a>
<a class="slide">></a>
</div>

Answer 2

div.arrow {
text-align: center;
}
.slide {
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<div class="arrow">
<a class="slide"><</a>
<a class="slide">></a>
</div>

Answer 3

Changes in class Slide:
display: inline-block;
line-height: 30px;
padding: 0px 0px;
The elements are not in a row as they are block elements. For your requirement they'll have to be converted to inline-block types.

Answer 4

You should use flexboxes:
section#slider_buttons {
display: flex;
display: -webkit-flex;
justify-content: center;
}
section.button {
display: inline-flex;
display: -webkit-inline-flex;
height: 32px;
width: 32px;
cursor: pointer;
border-radius: 50%;
background-color: #2874f0;
color: white;
}
section.button a {
display: block;
text-align: center;
margin: auto; /* Important */
}
<section id="slider_buttons">
<section class="button">
<a><</a>
</section>
<section class="button">
<a>></a>
</section>
<section>

Answer 5

You have two options.
1) Add BootStrap or a similar framework and wrap the two links in a div with a row class.
2) Change your CSS display setting to inline-block
.slide{
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}

Answer 6

Flex is the best tool to achieve this. Despite their are solutions with display block. Flex just allows you to controle it in more detail:
.slide-buttons {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
/* Clarity marker, removed when you understand the example */
background-color: rgba(0,0,0,.1);
}
.slide-buttons > a {
display: inherit;
align-items: center;
align-content: center;
justify-content: space-around;
height: 32px;
width: 32px;
margin-right: 5px;
cursor: pointer;
font-size: 16px;
line-height: 1;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
}
.slide-buttons > a:last-child {
margin-right: 0;
}
#bt-slide-left:after {
content: '\276E'; /* \003C */
}
#bt-slide-right:after {
content: '\276F'; /* \003E */
}
<div class="slide-buttons">
<a id="bt-slide-left"></a>
<a id="bt-slide-right"></a>
</div>
<br>
<!-- or -->
<div class="slide-buttons">
<a><</a>
<a>></a>
</div>