如何為輪廓邊框內的內容提??供填充-有解無憂

在這里，我想在左邊框對齊這個內圈。如圖中橙色線所示。這是我的HTML代碼

<section style="height: 300px;border: 2px solid green;">
        <ul id="Name_Section">
            <li style=" border: 2px solid blue;">I AM PRAVEEN KUMAR </li>
            <li id="logo"></li>
        </ul>
    </section>

下面是這個的CSS。如果有，請忽略額外的代碼。如何為輪廓邊框內的內容提??供填充

#Name_Section{
    display: flex;
    justify-content: space-around;
    padding: 30px;
}
#Name_Section li{
    list-style: none;
    padding: 10px;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#logo{
    outline: 1px solid rgb(255, 255, 255);
    outline-offset: 15px;
    background-color: rgb(38, 38, 54);
    height: 120px;
    width: 120px;
    border-radius: 70px;
}

uj5u.com熱心網友回復：

將元素放在擁有大小、填充和邊框的父 div 中

父母有一個相對位置
標志有一個絕對的位置

您現在可以使用屬性 top、bottom、left 或 right 在父級中將子級移動到您想要的位置

#logo{
    background-color: rgb(38, 38, 54);
    border-radius: 70px;
    height: calc(100% - 14px);
    width: calc(100% - 14px);
    position: absolute;
    right:0;
    top:7px; //the midle of the parent padding
}

.element-border {
  position:relative;
  border: solid grey 1px;
  border-radius: 70px;
  padding: 14px;
  height: 120px;
  width: 120px;
}

        <div class="element-border">
            <div id="logo"></div>
        </div>

uj5u.com熱心網友回復：

您只需要兩個容器即可重現您想要的效果，基本上外部容器應該有一個白色邊框，包含文本的內部容器應該比外部容器具有更小的尺寸。在我的例子中，有一個2em高度和寬度的差異來達到這個效果。然后兩者都具有display: flex;，align-items并justify-content設定為中心，以將它們內部的專案與中心對齊。請參閱下面的代碼段以供參考。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  height: 300px;
  border: 2px solid green;
  background: #4A495B;
}

#Name_Section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.outside {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid grey;
  border-radius: 50%;
  height: 12em;
  width: 12em;
}

.inside{
  background: #272636;
  color: #fff;
  border-radius: 50%;
  height: 10em;
  width: 10em;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<section>
  <ul id="Name_Section">
    <li class="outside">
      <p class="inside">I AM PRAVEEN KUMAR </p>
    </li>
  </ul>
</section>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410703.html

標籤：

上一篇：如何調整一行中點之間的間距？[復制]

下一篇：懸停在下拉串列上時如何顯示下拉串列