How to put div, inside another div, that is in the middle and that the text within it is in the middle too. HTML and Css

Question

How to put div, inside another div, that is in the middle and that the text within it is in the middle too. HTML and Css

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

How can I create a div within another div and that it be positioned in the middle?

The div I want to put is the #left and the #right Attached image:

my current code is this:

body {
  background: #232323;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

h1 {
  color: white;
  text-align: center;
  background: #02ff06;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1.1;
  padding-top: 20px;
  padding-bottom: 20px;
}

#colorToGuess {
  font-size: 200%;
}

.square {
  width: 30%;
  background: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
  border-radius: 15%;
  transition: background 0.6s;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
}

.colorContainer {
  width: 50%;
  margin: 5% auto;
}

.square:hover {
  box-shadow: 0 0 3px white;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
}

#stripe {
  background: white;
  text-align: center;
  height: 30px;
  width: 100%;
}

.selected {
  background: #02ff06;
  color: white;
}

button {
  border: none;
  background: none;
  text-transform: uppercase;
  height: 100%;
  font-weight: 700;
  color: #02ff06;
  letter-spacing: 1px;
  font-size: inherit;
  outline: none !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

button:hover {
  color: white;
  background-color: #02ff06;
}

#msg {
  text-transform: uppercase;
  display: inline-block;
  width: 20%;
  text-align: center;
}

#left {
  float: left;
  width: 25%;
  height: 100%;
}

#right {
  float: right;
  width: 25%;
}

.counter {
  width: 50%;
  height: 50%;
  margin: auto;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>RGB Guessing Game</title>
  <link rel="stylesheet" href="RGBGuess.css" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>
  <h1>THE GREAT
    <br>
    <span id="colorToGuess">Color</span>
    <br> Guessing Game</h1>
  <div id="stripe">
    <button id="reset">New Colors</button>
    <span id="msg"></span>
    <button id="easyBtn">Easy</button>
    <button id="hardBtn" class="selected">Hard</button>
  </div>
  <div id="left">
    <div class="counter">
      <span>0</span>
    </div>
  </div>
  <div id="right"></div>
  <div class="colorContainer">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <script src="RGBGuess.js"></script>
</body>

</html>

Thank you!

html css

asked by Varox 28.02.2018 в 00:06

source

3 answers

call a method from a DialogFragment Sensors in Android. I can not get them to show

score 1 · Answer 1

If you want to center everything within div you can use the magic of flex , with the justify-content: center; align-items: center; properties in this way:

body {
  background: #232323;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

#colorToGuess {
  font-size: 200%;
}

.square {
  width: 30%;
  background: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
  border-radius: 15%;
  transition: background 0.6s;
  -webkit-transition: background 0.6s;
  -moz-transition: background 0.6s;
}

.colorContainer {
  width: 50%;
  margin: 5% auto;
}

.square:hover {
  box-shadow: 0 0 3px white;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
}

#left {
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  width: 25%;
  min-height: 15rem;
  background-color: #00F;
}

#right {
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  width: 25%;
  min-height: 15rem;
  background-color: #0F0;
}

.counter {
  width: 50%;
  height: 50%;
  margin: auto;
  background-color: red;
}

<div id="left">
  <div class="counter">
    <span>0</span>
  </div>
</div>
<div id="right">
  <div>
    <p>HOLA</p>
  </div>
</div>
<div class="colorContainer">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

score 0 · Answer 2

  body {
background: #232323;
margin: 0;
font-family: 'Montserrat', sans-serif;
}

h1 {
color: white;
text-align: center;
background: #02ff06;
margin: 0;
font-weight: normal;
text-transform: uppercase;
line-height: 1.1;
padding-top: 20px;
padding-bottom: 20px;
}

#colorToGuess {
font-size: 200%;
}

.square {
width: 30%;
background: purple;
margin: 4.5px;
padding-bottom: 30%;
float: left;
border-radius: 15%;
transition: background 0.6s;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
}

.colorContainer {
width: 50%;
margin: 5% auto;

}

.square:hover {
box-shadow: 0 0 3px white;
transition: all 0.1s;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
}

#stripe {
background: white;
text-align: center;
height: 30px;
width: 100%;
}

.selected {
background: #02ff06;
color: white;
}

button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: #02ff06;
letter-spacing: 1px;
font-size: inherit;
outline: none !important;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}

button:hover {
color: white;
background-color: #02ff06;
}

#msg {
text-transform: uppercase;
display: inline-block;
width: 20%;
text-align: center;
}

#left {
float: left;
width: 25%;
border: 1px solid black;
height: 250px;
}

#right {
float: right;
width: 25%;
border: 1px solid black;
height: 250px;
}

.counter {
width: 50%;
height: 50%;
margin: auto;
background-color: red;
text-align: center;
margin-top: 50%;
}
.counter2 {
width: 50%;
height: 50%;
margin: auto;
background-color: red;
text-align: center;
margin-top: 50%;
}

<body>
  <div class="container">
    <h1>THE GREAT
      <br>
      <span id="colorToGuess">Color</span>
      <br> Guessing Game</h1>
    <div id="stripe">
      <button id="reset">New Colors</button>
      <span id="msg"></span>
      <button id="easyBtn">Easy</button>
      <button id="hardBtn" class="selected">Hard</button>
    </div>
    <div id="left">
      <div class="counter">
        <span>0</span>
      </div>
    </div>
    <div id="right">
      <div class="counter2">
        <span>0</span>
      </div>
    </div>
    <div class="colorContainer">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
  </div>

  <script src="RGBGuess.js"></script>
</body>

score 0 · Answer 3

0

If my div I want to center has a fixed measure I use this:

div{
position:absolute;
top:50%;
left:50%;
width:500px;
height:500px;
margin:-250px auto 0;
}

That is ideal for for example: notification windows or menus.

answered by 28.02.2018 в 00:45