Put text on the same line to the left of custom-CodePudding

I have a made 5 stars custom with CSS, I want add a text on the same line and center it but I cant seem to figure out how to.

Its suppose to be text just to the left of the stars centered in the middle of the page. I tried creating a div and then centering the content of both.

So just to repeat, I need to put my "paragraph" on the same line as the (paragraph ★★★★★) centered in the middle of page.

Thank you in advance.

{
  margin: 0;
  padding: 0;
}

.rate {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

<p id="paragraph">Experience</p>
<div  style="margin-left: 550px">
  <input type="radio" id="star5" name="rate" value="5" />
  <label for="star5" title="text">5 stars</label>
  <input type="radio" id="star4" name="rate" value="4" />
  <label for="star4" title="text">4 stars</label>
  <input type="radio" id="star3" name="rate" value="3" />
  <label for="star3" title="text">3 stars</label>
  <input type="radio" id="star2" name="rate" value="2" />
  <label for="star2" title="text">2 stars</label>
  <input type="radio" id="star1" name="rate" value="1" />
  <label for="star1" title="text">1 star</label>
</div>

CodePudding user response：

Create a flex container and remove margin-left from the rate class

.d-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

<!-- Remove margin-left -->
<div >
        <input type="radio" id="star5" name="rate" value="5"/>
        <label for="star5" title="text">5 stars</label>
        <input type="radio" id="star4" name="rate" value="4"/>
        <label for="star4" title="text">4 stars</label>
        <input type="radio" id="star3" name="rate" value="3"/>
        <label for="star3" title="text">3 stars</label>
        <input type="radio" id="star2" name="rate" value="2"/>
        <label for="star2" title="text">2 stars</label>
        <input type="radio" id="star1" name="rate" value="1"/>
        <label for="star1" title="text">1 star</label>
</div>

 *{
margin: 0;
padding: 0;
}

#paragraph{
    margin: 0;
    padding: 0;
}

.rate {
float: left;
height: 46px;
padding: 0 10px;
}

.rate:not(:checked)>input {
position: absolute;
top: -9999px;
}

.rate:not(:checked)>label {
float: right;
width: 1em;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 30px;
color: #ccc;
}

.rate:not(:checked)>label:before {
content: '★ ';
}

.rate>input:checked~label {
color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
color: #c59b08;
}
.d-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}

<div >
    <p id="paragraph">Experience</p>
    <div >
        <input type="radio" id="star5" name="rate" value="5"/>
        <label for="star5" title="text">5 stars</label>
        <input type="radio" id="star4" name="rate" value="4"/>
        <label for="star4" title="text">4 stars</label>
        <input type="radio" id="star3" name="rate" value="3"/>
        <label for="star3" title="text">3 stars</label>
        <input type="radio" id="star2" name="rate" value="2"/>
        <label for="star2" title="text">2 stars</label>
        <input type="radio" id="star1" name="rate" value="1"/>
        <label for="star1" title="text">1 star</label>
    </div>
</div>

If you want it exactly in the middle of the page, add height: 100vh

.d-flex{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
}

*{
    margin: 0;
    padding: 0;
}

#paragraph{
        margin: 0;
        padding: 0;
}

  .rate {
  float: left;
  height: 46px;
  padding: 0 10px;
  }

  .rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
  }

  .rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
  }

  .rate:not(:checked)>label:before {
  content: '★ ';
  }

  .rate>input:checked~label {
  color: #ffc700;
  }

  .rate:not(:checked)>label:hover,
  .rate:not(:checked)>label:hover~label {
  color: #deb217;
  }

  .rate>input:checked label:hover,
  .rate>input:checked label:hover~label,
  .rate>input:checked~label:hover,
  .rate>input:checked~label:hover~label,
  .rate>label:hover~input:checked~label {
  color: #c59b08;
  }
  .d-flex{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
  }

<div >
    <p id="paragraph">Experience</p>
    <!-- Comment -->
    <div >
        <input type="radio" id="star5" name="rate" value="5"/>
        <label for="star5" title="text">5 stars</label>
        <input type="radio" id="star4" name="rate" value="4"/>
        <label for="star4" title="text">4 stars</label>
        <input type="radio" id="star3" name="rate" value="3"/>
        <label for="star3" title="text">3 stars</label>
        <input type="radio" id="star2" name="rate" value="2"/>
        <label for="star2" title="text">2 stars</label>
        <input type="radio" id="star1" name="rate" value="1"/>
        <label for="star1" title="text">1 star</label>
    </div>
</div>

CodePudding user response：

Wrapped with a flex container would work. Like that:

And that the class for the container:

.flex {
  display: flex;
  margin: auto 0;  
  justify-content: center;  
}

{
  margin: 0;
  padding: 0;
}

.rate {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

.flex {
  display: flex;
  margin: auto 0;  
  justify-content: center;  
}

<div >
  <p id="paragraph">Experience</p>
  <div  style="margin-left: 550px">
    <input type="radio" id="star5" name="rate" value="5" />
    <label for="star5" title="text">5 stars</label>
    <input type="radio" id="star4" name="rate" value="4" />
    <label for="star4" title="text">4 stars</label>
    <input type="radio" id="star3" name="rate" value="3" />
    <label for="star3" title="text">3 stars</label>
    <input type="radio" id="star2" name="rate" value="2" />
    <label for="star2" title="text">2 stars</label>
    <input type="radio" id="star1" name="rate" value="1" />
    <label for="star1" title="text">1 star</label>
  </div>
</div>

CodePudding user response：

Give this a try. wrap your p and your rate div in another div(in this case I named it rate-container) and use flex to help align and center it then translate based on viewport height to center it on the page. also remove the style "style="margin-left: 550px"" from the div rate. this should get it centered on the page the way you had asked. just change flex-direction: row; to flex-direction: column; if you want the Experience above the stars.

* {
    margin: 0;
    padding: 0;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #c59b08;
}

.rate-container {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items:center;
    justify-content:center;
    transform: translatey(50vh);        
}

    <body>
        <div >
            <p id="paragraph">Experience</p>
            <div >
                <input type="radio" id="star5" name="rate" value="5" />
                <label for="star5" title="text">5 stars</label>
                <input type="radio" id="star4" name="rate" value="4" />
                <label for="star4" title="text">4 stars</label>
                <input type="radio" id="star3" name="rate" value="3" />
                <label for="star3" title="text">3 stars</label>
                <input type="radio" id="star2" name="rate" value="2" />
                <label for="star2" title="text">2 stars</label>
                <input type="radio" id="star1" name="rate" value="1" />
                <label for="star1" title="text">1 star</label>
            </div>
        </div>
    </body>

EDIT: I re-read your question and think I might have been incorrect of placing it in the center of the page horizontally and vertically:).
take out the transform: translatey(50vh); to get the desired result:) same as above answers have shown.

.rate-container {
        display: flex;
        text-align: center;
        align-items:center;
        justify-content:center;    
    }