CSS--中心元素之間的空隙？ -有解無憂

我正在嘗試將文本（Tickle）垂直居中，并留出空位，你能建議我在這種情況下應該做什么嗎？

"顯示 "按鈕應該始終保持在底部。

而文字（Tickle）應該在 "搜索 "按鈕和 "顯示 "按鈕之間。

。

span class="hljs-selector-tag">body {
    margin: 0;
}

.level-buttons {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: space-evenly;
}

.level-button {
    padding: 10px 20px;
}

.search-button {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

#search-button {
    padding: 10px 40%;
}

.show-button {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

#show-button {
    position: absolute;
    bottom: 5%。
    padding: 10px 40%。
}

.word {
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

.word-text {
    color: rgb（0, 94, 0）。
    字體大小。32px;
}

<!DOCTYPE html>
<html lang="en"/span>>
<head>/span>
    <meta charset="UTF-8">/span>
    < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
    <link rel=" stylesheet" href="/css/style. css">
    <link rel=" stylesheet" href="/css/semantic. min.css">
    <title>學習詞匯</title> 
</head>/span>
<body> 
    <div class="level-buttons"> 
        < button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button"> L1</button>
        < button onclick="changeLevel(2)" class="level-button ui basic button level-2-button"> L2</button>
        < button onclick="changeLevel(3)" class="level-button ui basic button level-3-button"> L3</button>
        < button onclick="changeLevel(4)" class="level-button ui basic button level-4-button"> L4</button>。
        < button onclick="changeLevel(5)" class="level-button ui basic button level-5-button"> L5</button>。
    </div>/span>
    <div class="search-button"> 
        < button class="ui basic purple button" id="search-button"> 搜索</button>。
    </div>/span>
    <div class="word"> 
        <span class="word-text"/span>> Tickle</span>。
    </div>/span>
    <div class="show-button"> 
        < button class="ui black basic button" id="show-button"> 顯示</按鈕>。
    </div>/span>
    <script src="/js/home. js"/span>></script>
</body> 
</html>/span>

我沒有計算機科學背景，這個小應用程式是為移動設備準備的。我感謝你的任何幫助。謝謝你。

uj5u.com熱心網友回復：

為了實作這個更新你的HTML與以下代碼

<div class="flex-box"> 
      <div>/span>
        <div class="level-buttons">/span>
          < button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button"> L1</button>
          < button onclick="changeLevel(2)" class="level-button ui basic button level-2-button"> L2</button>
          < button onclick="changeLevel(3)" class="level-button ui basic button level-3-button"> L3</button>
          < button onclick="changeLevel(4)" class="level-button ui basic button level-4-button"> L4</button>。
          < button onclick="changeLevel(5)" class="level-button ui basic button level-5-button"> L5</button>。
      </div>/span>
      <div class="search-button"> 
          < button class="ui basic purple button" id="search-button"> 搜索</button>。
      </div>/span>
    </div>/span>
      
    <div class="word"> 
        <span class="word-text"/span>> Tickle</span>。
    </div>/span>
    <div class="show-button"> 
        < button class="ui black basic button" id="show-button"> 顯示</按鈕>。
    </div>/span>
  </div>/span>

和你的CSS與以下內容

body {
  margin: 0;
}
.flex-box{
  display: flex;
  flex-direction: column;
  高度：100vh。
  justify-content: space-between;
}
.level-buttons {
  margin: 20px;
  顯示：flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.level-button {
  padding: 10px 20px;
}

.搜索-按鈕 {
  margin: 20px ;
  display: flex;
  flex-direction: row;
  align-items: center;
  調整內容：居中。
}

#search-button {
  padding: 10px 40%;
}

.show-button {
  margin: 20px ;
  顯示：柔性。
  flex-direction: row;
  align-items: center;
  調整內容：居中。
}

#show-button {
  padding: 10px 40%;
}

.word {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.word-text {
  顏色: rgb(0, 94, 0);
  字體大小: 32px;

Enjoy！

uj5u.com熱心網友回復：

這應該能行。

>。

span class="hljs-selector-tag">body {
    margin: 0;
}

.level-buttons {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: space-evenly;
}

.level-button {
    padding: 10px 20px;
}

.search-button {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

#search-button {
    padding: 10px 40%;
}

.show-button {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

#show-button {
    position: absolute;
    bottom: 5%。
    padding: 10px 40%。
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

section {
  color: rgb（0, 94, 0）。
  字體大小。32px;
  margin: 0;
  position: absolute;
  top: 50%;
}

<!DOCTYPE html> 
<html lang="en"> 
<head>/span>
    <meta charset="UTF-8">/span>
    < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
    <link rel=" stylesheet" href="/css/style. css">
    <link rel=" stylesheet" href="/css/semantic. min.css">
    <title>學習詞匯</title> 
</head>/span>
<body> 
    <div class="level-buttons"> 
        < button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button"> L1</button>
        < button onclick="changeLevel(2)" class="level-button ui basic button level-2-button"> L2</button>
        < button onclick="changeLevel(3)" class="level-button ui basic button level-3-button"> L3</button>
        < button onclick="changeLevel(4)" class="level-button ui basic button level-4-button"> L4</button>。
        < button onclick="changeLevel(5)" class="level-button ui basic button level-5-button"> L5</button>。
    </div>/span>
    <div class="search-button"> 
        < button class="ui basic purple button" id="search-button"> 搜索</button>。
    </div>/span>
    <div class="center-screen"> 
      <section>/span>
        <div>Tickle</div>
      </section>/span>
    </div> 
    <div class="show-button"> 
        < button class="ui black basic button" id="show-button"> 顯示</按鈕>。
    </div>/span>
    <script src="/js/home. js"/span>></script>
</body> 
</html>/span>

結果

uj5u.com熱心網友回復：

將這個樣式添加到你的.word類中

.word {
margin-top:50%。
}

uj5u.com熱心網友回復：

試試這個解決方案!

將它們包裹在一個新的div中并使其成為flex-box。重構一些重復的代碼，就像下面這樣。

。

span class="hljs-selector-tag">body {
    margin: 0;
}

.level-buttons {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: space-evenly;
}

.level-button {
    padding: 10px 20px;
}

.button {
    margin: 20px auto;
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

#show-button, #search-button {
    position: absolute;
    padding: 10px 40%。
}

.word {
    display: flex;
    flex-direction: 行。
    align-items: center;
    justify-content: center;
}

.word-text {
    color: rgb（0, 94, 0）。
    字體大小。32px。
}
.control-button {
display: flex;
flex-direction:列。
justify-content:space-between;
align-items:center;
height: 100vh;
}

<!DOCTYPE html> 
<html lang="en"> 
<head>/span>
    <meta charset="UTF-8">/span>
    < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
    <link rel=" stylesheet" href="/css/style. css">
    <link rel=" stylesheet" href="/css/semantic. min.css">
    <title>學習詞匯</title> 
</head>/span>
<body> 
    <div class="level-buttons"> 
        < button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button"> L1</button>
        < button onclick="changeLevel(2)" class="level-button ui basic button level-2-button"> L2</button>
        < button onclick="changeLevel(3)" class="level-button ui basic button level-3-button"> L3</button>
        < button onclick="changeLevel(4)" class="level-button ui basic button level-4-button"> L4</button>。
        < button onclick="changeLevel(5)" class="level-button ui basic button level-5-button"> L5</button>。
    </div>/span>
<div class="control-button">/span>
    <div class="button"> 
        < button class="ui basic purple button" id="search-button"> 搜索</button>。
    </div>/span>
    <div class="word"> 
        <span class="word-text"/span>> Tickle</span>。
    </div>/span>
    <div class="button"> 
        < button class="ui black basic button" id="show-button"> 顯示</按鈕>。
    </div>/span>
</div>/span>
    <script src="/js/home. js"/span>></script>
</body> 
</html>/span>

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

標籤：

上一篇：如何使用postgresql將存盤程序中的資料插入到新表中

下一篇：從另一個專案匯入模型