How to set text in center between parent left and right tag

I have this layout of my web page, here last div tag <div>{this.props.status}</div> is in left end. I want to set it in center between rock and scissors button.

enter image description here

Expected

enter image description here

<div className="AppTitle">
<b>Score: {this.props.score}</b>
<div>
  <RoundedButton text="Rock" clickitem={this.clickitem} />
  <RoundedButton text="Paper" clickitem={this.clickitem} />
  <RoundedButton text="Scissors" clickitem={this.clickitem} />
</div>

<div>{this.props.status}</div>

</div>

App.css

.AppTitle {
  margin: 50px;
}

.Button {
  padding: 20px;
  margin: 20px;
  border: 1px solid blue;
  border-radius: 10px;
}

What is the way to do it in HTML ?

4 answers

  • answered 2017-06-17 18:15 Mohamed Mohaideen AH

    Try this for css.

    .AppTitle {
      margin: 50px;
      display:inline-block;
     }
    
    .button {
      padding: 20px;
      margin: 20px;
      border: 1px solid blue;
      border-radius: 10px;
    }
    .status{text-align:center;}
    <div class="AppTitle">
    <b>Score: -1</b>
    <div>
      <Button class="button">Rock</Button>
      <Button class="button">Paper</Button>
      <Button class="button">Scissors</Button>
      
    </div>
    
    <div class="status">Computer Won</div>
    
    </div>

    EDITED

    Here added four button & background this one clear.

    .AppTitle {
      margin: 50px;
      display:inline-block;
      background:#b5b5b5;
     }
    
    .button {
      padding: 20px;
      margin: 20px;
      border: 1px solid blue;
      border-radius: 10px;
    }
    .status{text-align:center;background:#ccc;}
    <div class="AppTitle">
    <b>Score: -1</b>
    <div>
      <Button class="button">Rock</Button>
      <Button class="button">Paper</Button>
      <Button class="button">Scissors</Button>
      <Button class="button">Rock</Button>
     
      
    </div>
    
    <div class="status">Computer Won</div>

    UPDATED

    Make parent div to center.

    .wrapper{text-align:center;}
    .AppTitle {
      margin:50px;
      display:inline-block;
      background:#b5b5b5;
      text-align:left;
     }
    
    .button {
      padding: 20px;
      margin: 20px;
      border: 1px solid blue;
      border-radius: 10px;
    }
    .status{text-align:center;background:#ccc;}
    <div class="wrapper">
    <div class="AppTitle">
    <b>Score: -1</b>
    <div>
      <Button class="button">Rock</Button>
      <Button class="button">Paper</Button>
      <Button class="button">Scissors</Button>
     
    </div>
    
    <div class="status">Computer Won</div>
    
    </div>
    </div>

  • answered 2017-06-17 18:15 Ricky Dam

    This could also work @Williams

    .mainContainer {
      width: 500px;
      height: 200px;
      border: 2px solid black;
      background-color: lightgray;
    }
    
    .top {
      width: 100%;
      height: 50px;
      background-color: lightgray;
      display: table-cell;
      vertical-align: middle;
      padding-left: 100%;
    }
    
    .outputContainer {
      width: 100%;
      background-color: lightgray;
      height: 20px;
    }
    
    #score {
      margin-top: 50px;
      display: inline;
    }
    
    .third {
      width: 30%;
      height: 70px;
      background-color: lightgray;
      display: inline-block;
    }
    
    button {
      padding: 20px;
      border: 2px solid blue;
      border-radius: 10px;
      width: 100px;
    }
    <div class="mainContainer">
      <div class="top">
        <span id="score"><b> Score: </b></span>
      </div>
      
      <center>
        <div class="third">
          <button type="button"> Rock </button>
        </div>
        <div class="third">
          <button type="button"> Paper </button>
        </div>
        <div class="third">
          <button type="button"> Scissors </button>
        </div>
        
        <div class="outputContainer">
          <h2> Computer won! </h2>
        </div>
      </center>
    </div>

  • answered 2017-06-17 18:15 James Douglas

    If you have a look at .status, you'll find that it is the same width as the previous <div>. To center the text, you'll need to give it the CSS:

    .status {
      text-align: center;
    }
    

    Also, <RoundedButton> is not a HTML tag. Use <button> instead.

    .AppTitle {
      margin: 50px;
      display: inline-block;
    }
    .button {
      padding: 20px;
      margin: 20px;
      border: 1px solid blue;
      border-radius: 10px;
    }
    .status {
      text-align: center;
    }
    <div class="AppTitle">
      <b>Score: -1</b>
      <div>
        <button class="button">Rock</button>
        <button class="button">Paper</button>
        <button class="button">Scissors</button>
      </div>
      <div class="status">Computer Won</div>
    </div>

  • answered 2017-06-17 18:15 Philip Cornelius Glover

    In order to keep them aligned in most cases and not just as a fix on a certain display, try putting them in one and using display: block, like so

    <div className="AppTitle"> 
    <b>Score: {this.props.score}</b> 
    <div> 
        <RoundedButton text="Rock" clickitem={this.clickitem} /> 
        <div style="display:block">
            <RoundedButton text="Paper" clickitem={this.clickitem} />
            <span>{this.props.status}</span>
        </div>
        <RoundedButton text="Scissors" clickitem={this.clickitem} />
    </div>