如何將垂直線放到div的中心？

如何在垂直線的中間放一條垂直線？也許我應該在div中放置兩個div，並在另一個的右邊框上放置左邊框？我有一個DIV標籤，我需要在左邊放置一個ascx（它將不時與另一個ascx交換），然後在左邊放置一個靜態ascx。任何想法，我應該如何做到這一點？也許我回答了我自己的問題。如何將垂直線放到div的中心？

任何指針將是巨大的

來源

2009-07-24 Hcabnettek

只是爲了檢查梯度的中間一行 - 你想要兩列，包含一個ASCX和其他含另一個ASCX之一，一條線將它們從中間分開，對吧？ – Will 2009-07-24 20:25:16

什麼是ascx？ – j08691 2016-09-25 02:58:59

我認爲你多DIV的方法將是接近這個sanest方式：

<DIV> 
    <DIV style="width: 50%; border-right: solid 1px black"> 
     /* ascx 1 goes here */ 
    </DIV> 
    <DIV style="width: 50%"> 
     /* ascx 2 goes here */ 
    </DIV> 
</DIV>

來源

2009-07-24 20:15:26

剛查過;除非你編輯並添加一個浮動，這是行不通的。 – Will 2009-07-24 20:22:18

如果左側比右側短，那麼我認爲邊界將不會跨越整個高度。 – easement 2009-07-24 20:28:29

剛剛測試過這一點;作品：

<div id="left" style="width:50%;float:left;background:green;">left</div> 
<div id="right" style="margin-left:50%;border-left:solid 1px black;background:red;">right</div>

來源

2009-07-24 20:18:00 Will

三個div？

<DIV> 
    <DIV> 
     /* ascx 1 goes here */ 
    </DIV> 
    <DIV style="width:1px; background-color: #000"></DIV> 
    <DIV> 
     /* ascx 2 goes here */ 
    </DIV> 
</DIV>

來源

2009-07-24 20:18:04 Supertux

我認爲你需要一個包裝div與背景圖像。如果沒有，那麼你不能保證邊界從頂部到底部一路暢通。

<div class="wrapper"> 
    <div>Float this one left</div> 
    <div>float this one right</div> 
</div>

*一定要留在左右之間的空間的圖像顯示出來。

你需要一個風格，看起來像：

.wrapper{background:url(img.jpg) 0 12px repeat-y;}

來源

2009-07-24 20:27:41 easement

也許這可以幫助你

.here:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    border-left: 2px dotted #ff0000; 
 
    transform: translate(-50%); 
 
} 
 

 
div { 
 
    margin: 10px auto; 
 
    width: 60%; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    position:relative; 
 
    text-align:center 
 
}

<div class="here">Content</div>

這裏是一個JSFiddle演示。

來源

2013-11-05 22:10:39 ddjikic

下面是一個更現代的方式來繪製一個線下劃線。只是需要一點CSS：

.line-in-middle { 
 
    width:400px; 
 
    height:200px; 
 
\t background: linear-gradient(to right, 
 
\t        transparent 0%, 
 
\t        transparent calc(50% - 0.81px), 
 
\t        black calc(50% - 0.8px), 
 
\t        black calc(50% + 0.8px), 
 
\t        transparent calc(50% + 0.81px), 
 
\t        transparent 100%); 
 
\t }

<div class="line-in-middle"></div>

工程在所有現代瀏覽器。 http://caniuse.com/#search=linear-gradient

來源

2016-09-25 02:52:15

這是我的版本，使用linear-gradient

.block { 
 
     width:400px; 
 
     height:200px; 
 
     position:relative; 
 
} 
 
.block:before { 
 
     content:""; 
 
     width:1px; 
 
     height:100%; 
 
     display:block; 
 
     left:50%; 
 
     position:absolute; 
 
\t  background-image: -webkit-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: -moz-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: -ms-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: -o-linear-gradient(top, #fff, #000, #fff); 
 
     background-image: linear-gradient(top, #fff, #000, #fff); 
 
\t }

<div class="block"></div>

來源

2017-04-07 16:48:35 aje

如何將垂直線放到div的中心？

回答

相關問題