iT邦幫忙

0

邊框置中

請問各位大大,
我在文字周圍加了邊框,但邊框卻靠右邊,請問要怎麼讓邊框置中?

HTML程式碼(body內):

        <nav class="nav"> 
              <a class="bar_a" id="bar_a1" aria-current="page" target='_self' href="index.html">部落格</a>
              <a class="bar_a" id="bar_a2" aria-current="page" target='_self' href="">服務</a>
              <a class="bar_a" id="bar_a3" aria-current="page" target='_self' href="">關於Inspi.</a>
        </nav>
        


          <img src="https://i0.zi.org.tw/kocpc/2021/07/1625708401-00890058e5109063effb7c201d1c1345.jpg" id="img20210813" class="all20210813">
          <span id="word20210813" class="all20210813">MIUI</span>

CSS程式碼:

.bar_a{
    text-decoration: none;
    color: white;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.4px;
    font-size: 33px;
    border: solid 8px rgba(113, 150, 97, 0);
    border-radius: 19px;
    color:#ffffff;

}
nav{
    background-color: rgb(106, 141, 90);
    height: 12.7%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    user-select: none;
    letter-spacing: 50px;
    display: inline-flex;
    align-items: center;
    z-index: 1;
} 
#bar_a1:hover{ 
    font-size: 37px;
    border: solid 8px rgb(160, 202, 141);
    border-radius: 19px;
    width: 130px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    transition: 0.13s;
}
#bar_a2:hover{ 
    font-size: 37px;
    border: solid 8px rgb(113, 150, 97);
    border-radius: 19px;
    width: 100px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    transition: 0.13s;
}
#bar_a3:hover{ 
    font-size: 37px;
    border: solid 8px rgb(113, 150, 97);
    border-radius: 19px;
    width: 190px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    transition: 0.13s;
}
#bar_a1{
    border: solid 8px rgb(133, 173, 116);
    border-radius: 19px;
    width: 130px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    position: fixed;
    left: 9.4%;
}
#bar_a2{
    position: fixed;
    left: 22.22%;
}
#bar_a3{
    position: fixed;
    left: 32%;
}

/***部落格***/
/***2021 08 13***/
#img20210813{
    width: 300px;
    height: 200px;
    border-radius: 10px;
    position: fixed;
    top: 160px;
    left: 60px;
    vertical-align: text-top;
}
#word20210813{
    position: fixed;
    bottom: 500px;
    left: 450px;
}

2 個回答

1
frank575
iT邦新手 4 級 ‧ 2021-08-15 15:56:44
最佳解答

你要的是這個效果對嗎?

(如果是這種可以上 Codepen, JSFiddle 等線上編輯器的問題可以把它 PO 上去,這樣答者也比較好理解你想要的。)

#bar_a1{
    border: solid 8px rgb(133, 173, 116);
    border-radius: 19px;
    width: 130px; // 因為你下了寬度,你的每個文字都是,如果要置中的話請加上 text-align: center(沒注意到是 flex,更正:改成 justify-center)
    height: 50px; // 也建議不要,除非特殊需求
    display: inline-flex;
    align-items: center;
    position: fixed; // 建議不要,除非特殊需求
    left: 9.4%; // 同上
}

不過你的切法不是很好,很可能因為電腦螢幕寬高大小不同而跑版,而且下了很多多餘的語法,比方說 align-items 在 inline-block 裡面。

不要用 position fixed 去對位,如果你只是要 header 浮動的話下在他的外寬即可,內部的排版都用 flex, inline-block 之類的語法排版即可。

可以看看我改過的代碼,看看是不是你想要的感覺:
https://codepen.io/frank575/pen/WNjWZvG

看更多先前的回應...收起先前的回應...

我造你寫的寫上去了,但我還有二個問題,
1.我想要將文字移左邊一點,該怎麼做?
2.為什麼我的文字因為被hover而放大時,
header(導航欄)也會跟著移動?有什麼辦法能解決嗎?

第一個問題解決了,疑似是因為justify-content:center的關係

frank575 iT邦新手 4 級 ‧ 2021-08-15 18:09:20 檢舉
  1. pending y 的值改成 height 即可,高度會跟著變化當純是因為內容被撐大了,所以先將大小擴展成撐大時的樣式即可

.bar_a 改成以下,看看是不是你想要的效果

.bar_a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 19px;
  margin: 0 24px;
  font-size: 33px;
  border: 8px solid transparent;
  border-radius: 19px;
  transition: .13s;
  padding: 0 12px;
  height: 71px;
  display: flex;
  align-items: center;
}

謝謝你~我會再研究看看你的語法~~
因為我是個新手,很多東西會想要混在一起,
結果最後就變得很亂。Ω•

frank575 iT邦新手 4 級 ‧ 2021-08-15 19:05:52 檢舉

好的,新手難免哩,當語法熟後可以研究如何寫的簡單乾淨,也是一個很好的進步方式

1
shijung
iT邦新手 4 級 ‧ 2021-08-15 17:20:51

justify-content:center; X軸置中

#bar_a1{
    border: solid 8px rgb(133, 173, 116);
    border-radius: 19px;
    width: 130px;
    height: 50px;
    justify-content:center;
    display: inline-flex;
    align-items: center;
    position: fixed;
    left: 9.4%;
}

我要發表回答

立即登入回答