邊框置中

css border align

CherryYang 2021-08-15 14:22:06 ‧ 1314 瀏覽

分享至

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

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;
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

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

回應 5
分享
檢舉

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

CherryYang iT邦新手 4 級 ‧ 2021-08-15 17:28:47 檢舉

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

CherryYang iT邦新手 4 級 ‧ 2021-08-15 17:30:48 檢舉

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

frank575 iT邦新手 4 級 ‧ 2021-08-15 18:09:20 檢舉

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;
}

CherryYang iT邦新手 4 級 ‧ 2021-08-15 18:48:53 檢舉

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

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

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

登入發表回應

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%;
}