স্প্যান ট্যাগের মধ্যে আমি কীভাবে উল্লম্বভাবে কিছু সারিবদ্ধ করব?

Question

স্প্যানের মাঝখানে আমি কীভাবে "এক্স "টিকে উল্লম্বভাবে সারিবদ্ধ হতে পারি?

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

Answer 1

line-height:50px;উচ্চতার পরিবর্তে ব্যবহার করুন । কৌতুকটি করা উচিত;)

Comments

Excelent! এটি যে কোনও ধরণের ট্যাগে কাজ করে। আমার ক্ষেত্রে, <img> এ কাজ করেছেন।

— ফিলিপ কনডে

সমস্যাটি যখন লেখাটি মোড়ানো হয়। দুটি লাইন দিয়ে এই স্প্যানটি 100px উচ্চতার সাথে রেন্ডার হবে।

— নোরবার্তো ইওয়ান

যদি আপনার পাঠ্যটি মোড়ানো হয় তবে আমার উত্তর @

— নরবার্তোইয়ান

@ সুমিতের জন্য চিত্র ( এসও এর মন্তব্যে ইস্যুতে নকল )

— হাশব্রাউন

এটি শীর্ষে ভোট দেওয়া উত্তর হওয়া উচিত নয়, সমাধানটির বিষয়বস্তুর উপর নির্ভর করে কিছু অন্যান্য অনাকাঙ্ক্ষিত ফলাফল দিতে পারে।

— রাফেলমোরাইস

Answer 2

আপনার line-heightযদি একটি দীর্ঘ বাক্য থাকে তবে দৃষ্টিভঙ্গিটি ব্যর্থ হয়েছে awarespan যা লাইনটি ভেঙে রয়েছে কারণ পর্যাপ্ত জায়গা নেই। এই ক্ষেত্রে, আপনার সম্পত্তিটিতে উল্লিখিত এন পিক্সেলের উচ্চতার সাথে ফাঁক দিয়ে দুটি লাইন থাকবে।

আমি যখন তার ডানদিকে উল্লম্বভাবে কেন্দ্রীভূত পাঠ্য সহ একটি চিত্র দেখাতে চেয়েছিলাম যা একটি প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশনটিতে কাজ করে আমি তখন তাতে আটকে গেলাম। বেস হিসাবে আমি এরিক নিকাস এবং ফিলিপ টেদেওয়ের প্রস্তাবিত পদ্ধতির ব্যবহার করি।

আপনি যদি অর্জন করতে চান:

এবং এই:

.container {
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.container span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

Comments

একটি দ্বৈত উচ্চতা কি

— আলবার্তো

Answer 3

আপনার একাধিক লাইনের প্রয়োজন হলে এটি করার সহজতম উপায়। আপনি মোড়ানো spanঅন্য 'ঘ টেক্সট spanএবং তার উচ্চতা নির্ধারণ line-height। একাধিক লাইনে কৌতুক ভেতরের রিসেট করা হয় spanএর line-height।

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

ডেমো

অবশ্যই বাইরেরটি spanকোনও divবা হোয়াটহ্যিউ হতে পারে

Comments

spans, অন্যান্য ইনলাইন উপাদানগুলির মতো, কোনও HTML ইনলাইন উপাদান থাকতে পারে । নির্বিশেষে, আমি লিখেছি যে textvalignmiddleএটি divযদি প্রয়োজন হয় তবে এটি হতে পারে (এবং আপনি display:inline;যদি এটি ব্যবহারে খুব spans

— বিরক্ত

মানে তাদের থাকা উচিত নয়। তারা পাঠ্য ধারণের জন্য। অন্যথায় একটি ডিভ ব্যবহার করুন।

— জর্জিএফজি

spanহয় জেনেরিক ইনলাইন ধারক শুধুমাত্র টেক্সট হচ্ছে এত HTML এবং স্বল্পতা ইঙ্গিতটি হিসেবে; Sty এটি স্টাইলিংয়ের জন্য উপাদানগুলির গোষ্ঠীকরণের জন্য ব্যবহার করা যেতে পারে ... `। আমি অন্যকে আপনার ব্যক্তিগত কোডিং

— মানগুলিকে

— যেভাবেই হোক

আমার জন্য কাজ করে। স্প্যানের চেয়ে আলাদা এলিমেন্ট ব্যবহার করা হয়েছে।

— চকোলাটা

Answer 4

ফ্লেক্সবক্স উপায়:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

Comments

যেহেতু .fooস্প্যানটি display: flex-inlineআরও ভাল ফিট করতে পারে

— কোয়ালা

আপনি কি "ইনলাইন-ফ্লেক্স" বলতে চান?

— টিম গারহার্ড

Answer 5

লিঙ্কগুলির জন্য আমার এটির প্রয়োজন ছিল, তাই আমি স্প্যানটিকে একটি ট্যাগ এবং একটি ডিভ দিয়ে জড়িয়ে দিয়েছিলাম, তারপরে স্প্যান ট্যাগটি নিজেই কেন্দ্রীভূত করেছি

এইচটিএমএল

<div>
    <a class="tester" href="#">
        <span>Home</span>
    </a>
</div>

সিএসএস

.tester{
    display: inline-block;
    width: 9em;
    height: 3em;
    text-align: center;
}
.tester>span{
    position: relative;
    top: 25%;
}

Comments

এর জন্য ধন্যবাদ, আমি সিএসএসের সাথে জগাখিচুড়ি ঘৃণা করি, আমি যখন আপনার উত্তরটি এখানে এসে পৌঁছালাম তখন আমি সারাদিন একটি উপাদানকে উল্লম্বভাবে কেন্দ্র করার চেষ্টা করে কাটছিলাম। আপনি জীবন রক্ষাকারী!

— টড নেস্টর

Answer 6

সিএসএস উল্লম্ব কেন্দ্রের চিত্র এবং পাঠ্য

আমি উল্লম্ব চিত্র কেন্দ্রের জন্য একটি ডেমো তৈরি করেছি এবং পাঠ্যটিতে আমার ফায়ারফক্স, ক্রোম, সাফারি, ইন্টারনেট এক্সপ্লোরার 9 এবং 8-তেও পরীক্ষা আছে।

এটি খুব সংক্ষিপ্ত এবং সহজ সিএসএস এবং এইচটিএমএল, দয়া করে নীচের কোডটি দেখুন এবং আপনি স্ক্রিনশর্টে আউটপুট পেতে পারেন।

এইচটিএমএল

<div class="frame">
    <img src="capabilities_icon1.png" alt="" />
</div>

সিএসএস

  .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

    .frame::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content:"";
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

আউটপুট এখানে চিত্র বর্ণনা লিখুন

Answer 7

এটি আমার জন্য কাজ করে (কেলটেক্স একইভাবে বলেছেন)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

Answer 8

উল্লম্ব-সারিবদ্ধ CSS বৈশিষ্ট্যটি দুর্ভাগ্যক্রমে আপনি যা প্রত্যাশা করেন তা করে না। এই নিবন্ধটি CSS ব্যবহার করে কোনও উপাদান উল্লম্বভাবে সারিবদ্ধ করার জন্য 2 টি উপায় ব্যাখ্যা করে।

Answer 9

এক্সকে নীচে নামানোর জন্য উপযুক্ত মান হিসাবে প্যাডিং-শীর্ষ সেট করুন, তারপরে উচ্চতা থেকে প্যাডিং-শীর্ষের জন্য আপনার মানটি বিয়োগ করুন।