का उपयोग कर लाइन ब्रेक अक्षम करें मेरे पास एक div तत्व के अंदर कैनवास तत्व है। कैनवास आकार बदल सकता है, और मैं इसे लंबवत केंद्रित करना चाहता हूं। मैं इस सीएसएस दृष्टिकोण का उपयोग कर रहा हूँ:सीएसएस
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
आप इसे इस बेला पर काम कर देख सकते हैं: http://jsfiddle.net/8FPxN/
इस कोड मेरे लिए अच्छा काम करता है, जब तक ब्राउज़र कैनवास चौड़ाई के तहत आकार बदलता है। :before चयनकर्ता द्वारा परिभाषित वर्चुअल तत्व पहली पंक्ति पर खड़ा है, और कैनवास दूसरी पंक्ति में आता है। मैं उन्हें स्ट्राइक रखने, लाइन ब्रेक से परहेज करने और आवश्यकता होने पर स्क्रॉल बार दिखाने की कोशिश कर रहा हूं। overflow:auto कंटेनर पर नियम जोड़ने से स्क्रॉल बार दिखाता है, लेकिन रेखा टूटती रहती है।
कैनवास आकार बदल सकता है, इसलिए top:50%; margin-top:- ($canvas_height/2); दृष्टिकोण इसके लिए उपयुक्त नहीं है। खैर, यह हो सकता है, लेकिन मैं जावास्क्रिप्ट का उपयोग कर margin-top को नियंत्रित नहीं करना पसंद करता हूं। बस सीएसएस बहुत अच्छा होगा।
कोई भी विचार? धन्यवाद!
धन्यवाद, यह एक आकर्षण की तरह काम करता है! –
आप * बहुत * स्वागत करते हैं, मुझे मदद मिली है! –