how to center content making it the same shape without the width or height be smaller in this code ? , note the code is not full because stack over flow gived me a limt

.searchbox {
    margin-top: 20px;
    background-color: #2b2a38;
    padding: 15px 27px;
    font-size: 20px;
    color: #ccc;
    border: 3px solid #2b2a38;
    border-radius: 8px;
    width: 40%;
}

  .content {
    padding: 0 18px;
    width: 50%;
    margin-left: 25%;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #2f3136;
    color: #6a707a;
    text-align: left;
    display: none;
  }

<input id="myInput" type="text"  placeholder="Search">

            <div >
                <h4 style="color: rgb(169, 247, 247);">Category:</h4>
                <p style="color: rgb(242, 44, 232);">Premium</p>
                <h4 style="color: #cccccc;">Usage:</h4>
                <p>Hrr</p>
                <h4 style="color: #cccccc;">Examples:</h4>
                <p>Hrr {messageID} {roleID} {emojiID}</p>
            </div>
        </div>

.searchbox {
  margin-top: 20px;
  background-color: #2b2a38;
  padding: 15px 27px;
  font-size: 20px;
  color: #ccc;
  border: 3px solid #2b2a38;
  border-radius: 8px;
  width: 40%;
}

.content {
  padding: 0 18px;
  width: 50%;
  margin-left: 25%;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #2f3136;
  color: #6a707a;
  text-align: left;
  display: none;
}

<input id="myInput" type="text"  placeholder="Search">

<div >
  <h4 style="color: rgb(169, 247, 247);">Category:</h4>
  <p style="color: rgb(242, 44, 232);">Premium</p>
  <h4 style="color: #cccccc;">Usage:</h4>
  <p>Hrr</p>
  <h4 style="color: #cccccc;">Examples:</h4>
  <p>Hrr {messageID} {roleID} {emojiID}</p>
</div>
</div>

CodePudding user response：

hey in this case you can use this

.content{

width: 100%;
display: block;
margin: auto;

}

you can adjust your width or keep it the same

CodePudding user response：

You can center box content easily

.searchbox {
   display: flex;
   justify-content: center;
   // align-items: center; //when you want vertical center
}

CodePudding user response：

Size it with a relative unit (I used 20em) and use flex to center it.

• Stacked the elements flex-direction: column;
• Set the alignment on the content box: align-self: center;
• Set width relative to the parent font width: 20em;
• Removed the display:none; to show it
• Adjusted the colors using classes not embedded style attributes
• Added a "container" so I could use flex on it and stack the elements
• Fixed the malformed HTML

.container {
  display: flex;
  flex-direction: column;
}

.searchbox {
  margin-top: 20px;
  background-color: #2b2a38;
  padding: 15px 27px;
  font-size: 20px;
  color: #ccc;
  border: 3px solid #2b2a38;
  border-radius: 8px;
  width: 40%;
}

.content {
  align-self: center;
  padding: 0 18px;
  width: 20em;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #2f3136;
  color: #FFFFAC;
  text-align: left;
}

.category {
  color: rgb(169, 247, 247);
}

.premium {
  color: rgb(242, 44, 232);
}

.label-me {
  color: #eeeeee;
}

<div >
  <input id="myInput" type="text"  placeholder="Search">

  <div >
    <h4 >Category:</h4>
    <p >Premium</p>
    <h4 >Usage:</h4>
    <p>Hrr</p>
    <h4 >Examples:</h4>
    <p>Hrr {messageID} {roleID} {emojiID}</p>
  </div>
</div>