divの外側にテキストを強制的に配置し、別の色で中央に配置する

Question

outerdivにテキストの色を変更するには#000ですので、背景色は#fffです。

outerdivのcolorは#000に設定されていますが、テキストの色には影響しません。 margin: 0 auto;をdivのいずれかに使用しても、innertextのテキストのセンタリングまたはオーバーフローには影響しません。このフィドルでは、farouterdivの背景色は#dddで、現在のところテキストが表示されます。私はフィドルに今持っている何

.outerdiv {color:#000;} 
.outerbox {max-width:100px;background-color:#000;} 
.innertext {color:#fff;font-size:36px;text-align:center;} 

：私は黒に灰色の背景に白い文字で、行うことができるようにしたいどのような

https://jsfiddle.net/amryh49y/5/

：

Answer 1

フレックスボックスを使用したセンタリングとmix-blend-modeとの色の違い。たぶんシンプルなデモですが、可能性があります。このシナリオでは、 "outerdiv"は必須ではありません。

Mix-blend-mode@MDN

body { 
 
    text-align: center; 
 
} 
 
.farouterdiv { 
 
    padding: 20px 40px; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    background-color: #ddd; 
 
} 
 

 
.outerbox { 
 
    max-width: 100px; 
 
    background-color: #000; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.innertext { 
 
    color: #fff; 
 
    font-size: 36px; 
 
    text-align: center; 
 
    mix-blend-mode: difference; 
 
}

<div class="farouterdiv"> 
 

 
    <div class="outerbox"> 
 
     <div class="innertext">texttexttext</div> 
 
    </div> 
 

 
</div>

Answer 2

あなたは別の要素を追加する気にしない場合：

.outerdiv { 
 
    font-size: 50px; 
 
    position: absolute; 
 
} 
 

 
.innerdiv { 
 
    width: 65px; 
 
    background-color: black; 
 
    color: white; 
 
    height: 1em; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    overflow: hidden; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    white-space: nowrap; 
 
}

<div class="outerdiv"> 
 
    Hello World 
 
    <div class="innerdiv"> 
 
    <div class="text">Hello World</div> 
 
    </div> 
 
</div>

このいくつかの短所があります。 transformは、不完全なサポートif you need older browser support（IE 8以下）を持つ可能性があり、複数行のエントリに問題がある可能性があります。あなたのニーズに応じて、これらの両方を回避することができます。

あなたはそれが実際に.textのmargin-leftはのleftの否定である

// Javascript only here to get mouse-over effect. 
 
// Text-coloration can be gotten with just the CSS 
 

 
var outer = document.getElementsByClassName("outerdiv")[0]; 
 
var text = document.getElementsByClassName("text")[0]; 
 
var inner = document.getElementsByClassName("innerdiv")[0]; 
 

 
document.addEventListener("mousemove", function(e) { 
 
    var offset = outer.getBoundingClientRect().left; 
 
    var pos = e.clientX - offset 
 
    inner.style.left = pos + "px"; 
 
    text.style.marginLeft = -pos + "px"; 
 
});

.outerdiv { 
 
    font-size: 50px; 
 
    position: absolute; 
 
} 
 

 
.innerdiv { 
 
    width: 65px; 
 
    background-color: black; 
 
    color: white; 
 
    height: 1em; 
 
    top: 0; 
 
    left: 20px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 0; 
 
    margin-left: -20px; 
 
    white-space: nowrap; 
 
}

<p><em>mouse over to see effect</em></p> 
 
<div class="outerdiv"> 
 
    Hello World 
 
    <div class="innerdiv"> 
 
    <div class="text">Hello World</div> 
 
    </div> 
 
</div>

少し楽になり、非中心であることを、オフカラーのdivを希望した場合と左端からブラックボックスを望む距離。