How to Center an element and have a own line-CodePudding

I want the style of this project of mine must be justified in center but it doesent work, Especially for the converter tab i want each element has own line and must be centered inside the div container.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  display: block;
  align-items: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Unit Conversion</title>
</head>

<body>
  <div >
    <div >
      <h2>Metric/Imperial Unit Conversion</h2>
      <input type="text" id="input-el"  />
      <button  id="convert-btn">Convert</button>
    </div>

    <div >
      <div  id="length-el">
        <h2>Length (Meter/Feeet)</h2>
        <p  id="output-el"></p>
      </div>

      <div  id="volume-el">
        <h2>Volume (Liters/Gallons)</h2>
        <p  id="output-el2"></p>
      </div>
      <div  id="mass-el">
        <h2>Mass (Kilograms/Pounds)</h2>
        <p  id="output-el3"></p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

I tried the display block and in-line block but the element inside the container is not moving.

CodePudding user response：

i think the container class is the implemented one because he is the in the general div that contain the "converter-tab" div , and the reason of not-centered elements is the padding and margin css classes. try to remove it or replace it by this one :

.container {
  margin:  auto;
}

CodePudding user response：

What you really have to do in this case is to assign a property text-align: center to your .converter-tab class and moreover you have to wrap your h2, input and button individually inside a separate div for each one.

You can check my working snippet below:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  display: block;
  align-items: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
  text-align: center;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Unit Conversion</title>
</head>

<body>
  <div >
    <div >
       <div><h2>Metric/Imperial Unit Conversion</h2></div>
       <div><input type="text" id="input-el"  /></div>
       <div><button  id="convert-btn">Convert</button></div>
    </div>

    <div >
      <div  id="length-el">
        <h2>Length (Meter/Feeet)</h2>
        <p  id="output-el"></p>
      </div>

      <div  id="volume-el">
        <h2>Volume (Liters/Gallons)</h2>
        <p  id="output-el2"></p>
      </div>
      <div  id="mass-el">
        <h2>Mass (Kilograms/Pounds)</h2>
        <p  id="output-el3"></p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

I've annotated your css below. I've made your input div children block level elements so they appear on their own line. I've then added margin: auto to them to make them centered. I've aligned text to the center using text-align: center;

Alignment is always a PITA (much less so these days) but there's a handy tool to use to help you: howtocenterincss.com

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
}

.converter-tab > * {
  display: block; /* make each item a block element so it appears on its own line */
  text-align: center; /* make text (e.g. inside <p> tags) centered */
  margin-inline: auto; /* make block level elements centered */
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
  margin-bottom: 0.5rem; /*just added this to neaten it up a smidge */
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  text-align: center; /* center the text in your output div */
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

<div >
  <div >
    <h2>Metric/Imperial Unit Conversion</h2>
    <input type="text" id="input-el"  />
    <button  id="convert-btn">Convert</button>
  </div>

  <div >
    <div  id="length-el">
      <h2>Length (Meter/Feet)</h2>
      <p  id="output-el"></p>
    </div>

    <div  id="volume-el">
      <h2>Volume (Liters/Gallons)</h2>
      <p  id="output-el2"></p>
    </div>
    <div  id="mass-el">
      <h2>Mass (Kilograms/Pounds)</h2>
      <p  id="output-el3"></p>
    </div>
  </div>
</div>

CodePudding user response：

As it's acceptably supported all over major browsers I'd use flex: just change the display mode of your container div to flex, set flex-direction: column; and justify-content: center;. After this adjust top and bottom padding as you prefer.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.converter-tab {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  margin-top: 10px;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Unit Conversion</title>
</head>

<body>
  <div >
    <div >
      <h2>Metric/Imperial Unit Conversion</h2>
      <input type="text" id="input-el"  />
      <button  id="convert-btn">Convert</button>
    </div>

    <div >
      <div  id="length-el">
        <h2>Length (Meter/Feeet)</h2>
        <p  id="output-el"></p>
      </div>

      <div  id="volume-el">
        <h2>Volume (Liters/Gallons)</h2>
        <p  id="output-el2"></p>
      </div>
      <div  id="mass-el">
        <h2>Mass (Kilograms/Pounds)</h2>
        <p  id="output-el3"></p>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

To center an element and have each element on its own line, you can use the display: flex; and justify-content: center; properties on the parent container, and set the flex-wrap: wrap; property to allow the elements to wrap onto new lines.

You can add the following CSS to your existing stylesheet:

.converter-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.length,
.volume,
.mass {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 10px;
}

Also you can use the text-align: center for the h2 and p element for the text alignment

h2{
  text-align: center;
}

p{
  text-align: center;
}

This should center the elements inside the parent container and have each element on its own line.