I have this problem where I want to line up two elements (a <p>
and a <button>
) but I can't seem to find a way of lining them up; I have tried using padding, margin, flex and even grid design, but nothing seems to work.
Here is an image showcasing the problem: Image
And here is a code snippet of my latest attempt:
.line p {
display: inline-block;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>
This is actually quite easy with flexbox. Make the p tag a flex element and then use the align-items: center;
to make them appear on the same line.
.line p {
display: flex; /* Change from inline-block to flex */
align-items: center; /* Added to make them appear on the same line */
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Oswald', sans-serif;
font-size: 20px;
width: 100%;
border-bottom: lightgray solid 1px;
}
.activeLine {
color: #38B938;
background-color: white;
}
.buttonsActive {
background-color: inherit;
border: 1.5px solid #38B938;
color: #38B938;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
}
.inactiveLine {
background-color: white;
}
.inactiveLine {
background-color: white;
}
.buttonsA {
background-color: inherit;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-radius: 50%;
float: right;
margin-right: 10px;
}
.buttonsA:hover {
color: #38B938;
transition: linear 0.5s;
}
.buttonsA:first-child {
margin-left: 10px;
float:left;
border: 1.5px solid black;
}
.buttonsA:first-child:hover {
color: #38B938;
border: 1.5px solid #38B938;
transition: linear 0.5s;
}
.buttonsActive:first-child {
margin-left: 10px;
float:left;
}
<div class="voiceGrid">
<div class="titleVoiceBanner">
<h2 class="textVoiceTitle">Problem for </h2>
<h3 class="textVoiceSubtlt">Stack Overflow</h3>
</div>
<div>
<audio id="player1">
<source type="audio/mpeg">
</audio>
<div class="line inactiveLine" id="line1">
<p>
<button id="buttonPlay" class="buttonsA">▶</i></button>
Loc 1
</p>
</div>
</div>
</div>