vertical-align: middle
কাজ করবে না কেন ? এবং এখনও, vertical-align: top
না হবে।
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
vertical-align: middle
কাজ করবে না কেন ? এবং এখনও, vertical-align: top
না হবে।
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
উত্তর:
আসলে, এক্ষেত্রে এটি বেশ সহজ: চিত্রটিতে উল্লম্ব সারিবদ্ধ প্রয়োগ করুন। যেহেতু এটি সমস্তই এক লাইনে রয়েছে তাই এটি সত্যই আপনি ইমেজটি প্রান্তিককরণ করতে চান, পাঠ্যটি নয়।
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
এফএফ 3 তে পরীক্ষিত।
এই ধরণের লেআউটের জন্য আপনি এখন ফ্লেক্সবক্স ব্যবহার করতে পারেন।
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
span
ফন্টের আকার বাড়িয়ে দিলে এটি কাজ করে না । আমার উত্তর দেখুন ।
width:16px;height:16px
) সেট করেন তবে দেখতে পাবেন যে চিত্রটি খুব কম হবে ...
উল্লম্ব-সারিবদ্ধ করার জন্য এখানে কিছু সাধারণ কৌশল রয়েছে:
এটি সহজ: পাঠকের উপাদানটির লাইন-উচ্চতাটি ধারকটির সমান করুন
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
একেবারে তার ধারকটির সাথে সম্পর্কিত একটি অভ্যন্তরীণ ডিভ অবস্থান
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
বোর্ড জুড়ে এটি সঠিকভাবে কাজ করার জন্য আপনাকে সিএসএসকে কিছুটা হ্যাক করতে হবে। ভাগ্যক্রমে, একটি আইই বাগ আছে যা আমাদের পক্ষে কাজ করে। top:50%
ধারক এবং top:-50%
অভ্যন্তরীণ ডিভ উপর সেট করা , আপনি একই ফলাফল অর্জন করতে পারেন। আইই সমর্থন করে না এমন আরেকটি বৈশিষ্ট্য ব্যবহার করে আমরা দুটোকে একত্রিত করতে পারি: উন্নত সিএসএস নির্বাচক।
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
এই সমাধানটির জন্য অন্যান্য সমাধানগুলির তুলনায় কিছুটা বেশি আধুনিক ব্রাউজারের প্রয়োজন, কারণ এটি transform: translateY
সম্পত্তি ব্যবহার করে । ( http://caniuse.com/#feat=transforms2d )
কোনও উপাদানটিতে নিম্নলিখিত 3 টি লাইন সিএসএস প্রয়োগ করা মূলত পিতামাতার উপাদানটির উচ্চতা নির্বিশেষে এটি তার পিতামাতার মধ্যে উল্লম্বভাবে কেন্দ্র করবে:
position: relative;
top: 50%;
transform: translateY(-50%);
display:table
এবং display:table-cell
CSS সিলেক্টর মহান কাজ ছাড়া, অবশ্যই, IE7 এবং নিচে। বেশ কয়েক ঘন্টা ধরে চুল ছিঁড়ে যাওয়ার পরে, আমি স্থির করেছিলাম যে এখনও আমি আই 7- ব্যবহার করে এমন কারও সাথে আমার সত্যিই ডিল করার দরকার নেই।
display:table
বিভিন্ন ব্রাউজারে কিছু সীমাবদ্ধতা রয়েছে (আইডি 11- max-height
এ উপাদানটি টেবিলের ঘরের ভিতরে থাকলে কাজ করে না), তাই কিছু প্রান্তের ক্ষেত্রে টেবিলের ঘরগুলি ব্যবহার করে উল্লম্বভাবে সারিবদ্ধ হওয়া ভাল ধারণা নয়।
আপনার div
একটি ফ্লেক্স ধারক মধ্যে পরিবর্তন করুন :
div { display:flex; }
সমস্ত সামগ্রীর জন্য সারিবদ্ধকরণের জন্য এখন দুটি পদ্ধতি রয়েছে:
পদ্ধতি 1:
div { align-items:center; }
পদ্ধতি 2:
div * { margin-top:auto; margin-bottom:auto; }
বিভিন্ন প্রস্থ এবং উচ্চতার মানগুলিতে img
এবং বিভিন্ন ফন্টের আকারের মানগুলিতে চেষ্টা করুন span
এবং আপনি দেখতে পাবেন যে সেগুলি সবসময় ধারকটির মাঝখানে থাকে।
justify-content: center;
এবং ফাঁকা দেওয়ার জন্যও (<br/> ট্যাগ ব্যবহার না করে) আপনাকে একটি এ নিক্ষেপ করতে চাইবে padding: 1em;
। আমাদের জন্য আধুনিক আপডেট ব্রাউজার ডেভস।
vertical-align: middle
এটিকে পুরোপুরি কেন্দ্রিক করে তুলতে আপনাকে উভয় উপাদানকেই আবেদন করতে হবে।
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
গৃহীত উত্তর সেন্টার (যেমন সংজ্ঞায়িত পাশে পাঠের এক্স-উচ্চতার অর্ধেক প্রায় আইকন আছে সিএসএস চশমা )। যা যথেষ্ট ভাল হতে পারে তবে কিছুটা দূরে দেখতে পারে, যদি পাঠ্যে আরোহী বা বংশধররা কেবল উপরে বা নীচে দাঁড়িয়ে থাকে:
বামদিকে, পাঠ্যটি প্রান্তিককরণ করা হয়নি, ডানদিকে এটি উপরে প্রদর্শিত আছে। উল্লম্ব-সারিবদ্ধ সম্পর্কে এই নিবন্ধে একটি লাইভ ডেমো পাওয়া যাবে ।
কেউ কেন vertical-align: top
দৃশ্যে কাজ করে সে সম্পর্কে কথা বলেছেন ? প্রশ্নের চিত্রটি সম্ভবত পাঠ্যের চেয়ে লম্বা এবং এভাবে লাইন বাক্সের শীর্ষ প্রান্তটি সংজ্ঞায়িত করে। vertical-align: top
স্প্যান উপাদানটিতে কেবল লাইন বাক্সের শীর্ষে এটি অবস্থান করুন।
vertical-align: middle
এবং এর মধ্যে আচরণের মূল পার্থক্যটি top
হ'ল প্রথমটি বাক্সের বেসলাইন (যা সমস্ত উল্লম্ব সারিবদ্ধকরণগুলি পূরণ করার জন্য যেখানে প্রয়োজন সেখানে স্থাপন করা হয় এবং এর পরিবর্তে অনুভূত হয় অপ্রত্যাশিত ) এবং লাইন বাক্সের বাইরের সীমানা (যা হয় আরও স্পষ্ট)।
গৃহীত উত্তরে ব্যবহৃত কৌশলটি কেবল একক রেখাযুক্ত পাঠ্য ( ডেমো ) এর জন্য কাজ করে তবে বহু-লাইন পাঠ্য নয় ( ডেমো ) নয় - যেমন উল্লেখ আছে।
কারও যদি কোনও চিত্রটিতে উল্লম্বভাবে বহু-রেখাযুক্ত পাঠ্যটি কেন্দ্র করে নেওয়া প্রয়োজন হয় তবে কয়েকটি উপায় এখানে দেওয়া হয়েছে (পদ্ধতি 1 এবং 2 দ্বারা অনুপ্রাণিত এই সিএসএস-ট্রিকস নিবন্ধটি )
সিএসএস:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
সিএসএস:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
সিএসএস (উপরের ফিডલમાં বিক্রেতার উপসর্গ রয়েছে):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
এই কোডটি IE এর পাশাপাশি এফএফ তেও কাজ করে:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
রেকর্ডের জন্য, প্রান্তিককরণ "কমান্ডগুলি" কোনও স্প্যানে কাজ করা উচিত নয়, কারণ এটি একটি ইন-লাইন ট্যাগ, কোনও ব্লক-লেভেল ট্যাগ নয়। প্রান্তিককরণ, মার্জিন, প্যাডিং ইত্যাদির মতো জিনিসগুলি একটি ইন-লাইন ট্যাগে কাজ করবে না কারণ ইনলাইনটির বিন্দু পাঠ্যের প্রবাহকে ব্যাহত করবে না।
সিএসএস এইচটিএমএল ট্যাগগুলিকে দুটি গ্রুপে বিভক্ত করে: ইন-লাইন এবং ব্লক-স্তর। "সিএসএস ব্লক বনাম ইনলাইন" অনুসন্ধান করুন এবং একটি দুর্দান্ত নিবন্ধ প্রদর্শিত হবে ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(মূল সিএসএস নীতিগুলি বোঝা এটির পক্ষে এতটা বিরক্তিকর না হওয়ার মূল বিষয়)
text-align
এবং vertical-align
( td
উত্তরাধিকারের উদ্দেশ্যে উপাদানগুলিতে এর প্রয়োগ ব্যতীত ) নির্দিষ্টভাবে inline
এবং inline-block
উপাদানগুলির জন্য বোঝানো হয় ( span
,img
ইত্যাদি)।
line-height:30px
স্প্যানটির জন্য ব্যবহার করুন যাতে পাঠ্যটি চিত্রের সাথে প্রান্তিক হয়:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
আপনি করতে পারেন এমন আরেকটি জিনিস হ'ল line-height
পাঠ্যটির মধ্যে থাকা চিত্রগুলির আকারকে সেট করুন<div>
। তারপরে ছবিগুলি সেট করুনvertical-align: middle;
এটি গুরুত্ব সহকারে সবচেয়ে সহজ উপায়।
এর সাথে কোনও সমাধান দেখেনি margin
এখনও এই উত্তরগুলির কোনও , তাই এই সমস্যার সমাধানটি এখানে আমার।
এই সমাধান কেবলমাত্র যদি আপনি আপনার চিত্রের প্রস্থ জানেন works
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
background:url(../images/red_bullet.jpg) left 3px no-repeat;
আমি সাধারণত 3px এর জায়গায় ব্যবহার করি top
। এই মানটি বাড়িয়ে / হ্রাস করার মাধ্যমে চিত্রটি প্রয়োজনীয় উচ্চতায় পরিবর্তন করা যেতে পারে।
আপনি সম্পত্তি inline element
ব্যবহার হিসাবে ইমেজ সেট করতে পারেনdisplay
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
একাধিক সমাধান:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
সমস্ত ব্রাউজারে এবং ie9 + এ কাজ করে
এটা বিভ্রান্তিকর হতে পারে, আমি একমত। সারণী বৈশিষ্ট্যগুলি ব্যবহার করার চেষ্টা করুন। আমি ওয়েবপৃষ্ঠার কেন্দ্রে মডেলগুলি অবস্থানের জন্য এই সাধারণ সিএসএস ট্রিকটি ব্যবহার করি। এটিতে বড় ব্রাউজার সমর্থন রয়েছে:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
এবং সিএসএস অংশ:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
নোট করুন যে আপনার ইচ্ছামতো কাজ করতে ইমেজ এবং টেবিলের ধারকটির আকারটি আপনার স্টাইল এবং সমন্বয় করতে হবে। উপভোগ করুন।
প্রথমত ইনলাইন সিএসএস মোটেই সুপারিশ করা হয় না, এটি সত্যিই আপনার এইচটিএমএলকে বিশৃঙ্খলা করে।
চিত্র এবং স্প্যান সারিবদ্ধ করার জন্য, আপনি সহজভাবে এটি করতে পারেন vertical-align:middle
।
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
এটি আপনার নেভিগেশনের ব্রাউজারে কেন এটি রেন্ডার করে না তা নিশ্চিত নন, তবে আমি সাধারণত একটি চিত্র এবং কেন্দ্রিক পাঠ্য সহ একটি শিরোনাম প্রদর্শনের চেষ্টা করার সময় এই জাতীয় স্নিপেট ব্যবহার করি, আশা করি এটি সাহায্য করে!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
আপনি সম্ভবত এটি চান:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
অন্যরা যেমন পরামর্শ দিয়েছে, vertical-align
ছবিতে চেষ্টা করুন:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
সিএসএস বিরক্তিকর নয়। আপনি কেবল ডকুমেন্টেশন পড়েন না । ; p
vertical-align