.popup {
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
  }

I have above codes in my css file that added in html head <link href="/static/styles.css" rel="stylesheet">

In my html there where many uses of .popupand .popuptext and I wont change above styles.

In the html code is here↓

<div  style="display: inline"><div  id="tableHeader">
    <label>data type</label>
    <br>
    <input type="checkbox" name="not_null"> NOT NULL
    <br>
    <input type="checkbox" name="unique"> UNIQUE
    <br>
    <button  type="submit" name="delete">Delete</button>
</div></div>

All elements above are aligned as center.

But I need centralize the Delete button and the label and other input elements be left aligned.

As I consist change style from html code and stylesheet has other uses, I have tried below↓

<div  style="display: inline"><div  id="tableHeader">
    <label>data type</label>
    <br>
    <span style="text-align: left;"><input type="checkbox" name="not_null"> NOT NULL</span>
    <br>
    <span style="text-align: left;"><input type="checkbox" name="unique"> UNIQUE</span>
    <br>
    <button  type="submit" name="delete">Delete</button>
</div></div>

But input elements remain centralist and not left aligned!

I need input get left aligned only with change style settings in html element attributes.

CodePudding user response：

Leaving the html as it is, you could style the .popuptext children as display:block so that they will take the whole width. Then you can style indipendently its parts:

1. The <label> element - its content gets centered with text-align: center
2. The <input> elements - they get aligned to left with text-align: left; but just because we are actually styling their parents <span>
3. The <button> element - this required margin: 0 auto meaning that the left and right margins will be set to the maximum available space in the row

Everything else in the styles here in the demo is for decoration purpose.

.popup{
  border: solid;
  width: 10em;
  background: lightgray;
}

.popuptext > *{
  display: block;
}

.popuptext > span{
  text-align: left;
}

.popuptext > label{
  text-align: center;
  margin-bottom: .5em;
}
.popuptext > button{
  margin: .5em auto;
  border: none;
  background: red;
  color: white;
  padding: .8em .6em;
  border-radius: 5px;
}

<div >
  <div  id="tableHeader">
    <label>data type</label>
    <span><input type="checkbox" name="not_null"> NOT NULL</span>
    <span><input type="checkbox" name="unique"> UNIQUE</span>
    <button  type="submit" name="delete">Delete</button>
  </div>
</div>

CodePudding user response：

You can restructure your HTML and CSS as such:

        .popup .popuptext {
            width: 160px;
            background-color: #555;
            color: #fff;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
        }

        .popuptext .checkbox-holder {
            width: fit-content;
            margin: auto;
        }

<div  style="display: inline">
        <div  id="tableHeader">
            <div style="text-align: center;"><label>data type</label></div>

            <div >
                <div><input type="checkbox" name="not_null" id="not_null"> <label for="not_null">NOT NULL</label></div>
                <div><input type="checkbox" name="unique" id="unique"> <label for="unique">UNIQUE</label></div>
            </div>


            <div style="text-align:center"><button  type="submit" name="delete">Delete</button>
            </div>

        </div>
    </div>