একটি বৃহত ফন্ট-দুর্দান্ত আইকন দিয়ে পাঠ্যটি উল্লম্বভাবে কেন্দ্রে রাখবেন?

Question

বলি আমার কাছে একটি ফন্ট-দুর্দান্ত আইকন এবং কিছু পাঠ্য সহ একটি বুটস্ট্র্যাপ বোতাম আছে:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

আমি কীভাবে পাঠ্যকে উল্লম্বভাবে কেন্দ্রীভূত করব? পাঠ্যটি এখন আইকনের নীচের প্রান্তের সাথে সংযুক্ত করা হয়েছে: http://jsfiddle.net/V7DLm/1/

সম্পাদনা: আমার একটি সম্ভাব্য সমাধান রয়েছে : http://jsfiddle.net/CLdeG/1/ তবে এটি কিছুটা হ্যাকি অনুভব করে - অতিরিক্ত পি ট্যাগের সাথে পরিচয় করায়, টান-বাম এবং প্রদর্শন ব্যবহার করে: সারণী। সম্ভবত কেউ একটি সহজ উপায় প্রস্তাব করতে পারেন।

Comments

তুমি দেবতা গুরুতরভাবে, আমি আজ এটিতে 2 ঘন্টা ব্যয় করেছি, আপনার সমাধানটি সবচেয়ে সুদূরতম শুকিয়ে গেছে। কিছু হার্ডকোড করার প্রয়োজন নেই।

— চক

এই পদ্ধতির সহজ

— রবীণ বেমসিংহ

Answer 1

আমাকে নিজেই এটি করতে হয়েছিল, আপনার অন্যদিকে এটি করা দরকার।

• আপনার পাঠ্যের উল্লম্ব সারিবদ্ধ সঙ্গে খেলবেন না
• ফন্ট-দুর্দান্ত আইকনের উল্লম্ব সারিবদ্ধ সঙ্গে খেলুন

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

অবশ্যই আপনি ইনলাইন শৈলীগুলি ব্যবহার করতে পারেন এবং এটি আপনার নিজের সিএসএস শ্রেণিতে লক্ষ্যবস্তু করতে পারেন। তবে এটি একটি অনুলিপি পেস্ট ফ্যাশনে কাজ করে।

এখানে দেখুন: পাঠ্যের উল্লম্ব সারিবদ্ধকরণ এবং বোতামে আইকন

এটি যদি আমার উপর নির্ভর করে তবে আমি আইকন -2 এক্স ব্যবহার করব না। এবং কেবল নীচের মত ফন্ট-আকার নিজেই নির্দিষ্ট করুন

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

একটি কাজের উদাহরণের জন্য, দয়া করে JsFizz দেখুন

Comments

হ্যাঁ, এটি একটি ভাল সমাধান, ধন্যবাদ। এখনও jsfiddle.net/paulftw/F3KyK/41

— পল

আমি কীভাবে এটি করব তার জন্য আমি আপনার jsfiddle আপডেট করেছি। আমি 2x ব্যবহারের পরিবর্তে আইকনটির জন্য হরফ-আকার ব্যবহার করেছি। jsfiddle.net/3GMjp/1

— andxyz

আপনার কোডের প্রথম টুকরোতে <span> প্রারম্ভিক ট্যাগটি শেষ </ i> ট্যাগের সাথে মিলে না।

— jzacharuk

কিছু আইকন নিয়ে কাজ করে না। এফএ-এঙ্গেল-বাম উদাহরণ

— স্টিচচেজার

এটি বুঝতে গুরুত্বপূর্ণ যে ফন্টআউভাস জেএস ফাইলগুলিও চেহারা পরিবর্তন করতে পারে। আমার আইকন খুব শীর্ষে দূরে ছিল, আমি JS অন্তর্ভুক্তি মোছা তা দেখতে ঘটতে পারে এবং এখনই এটিকে নীচে -.- অতিদূরে এর

— lucidbrot

Answer 2

আমি সময়টির 99% পাঠ্যের পাশে আইকনগুলি ব্যবহার করি তাই আমি বিশ্বব্যাপী পরিবর্তনটি করেছি:

.fa-2x {
  vertical-align: middle;
}

প্রয়োজন অনুসারে একই সংজ্ঞাতে 3x, 4x, ইত্যাদি যুক্ত করুন।

Comments

আমার মতে এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, কারণ এটি যতদূর সহজ সমাধান, যদি না আমি মূল প্রশ্নটিতে কিছু মিস করি না। ধন্যবাদ @ রুশনারোক! আমি নিশ্চিত না কেন কিছু লোক কেন ব্যবহার না করতে বলে vertical-align: middle;- আমি এখানে কিছু মিস করছি। দয়া করে যদি ব্যাখ্যা করুন।

— কেন্ডল

@ কেন্ডাল রথ আমি মনে করি যখন লোকেরা ব্যবহার না করতে বলে vertical-align: middle, তাদের অর্থ আপনি যদি blockউপাদান ব্যবহার করছেন । আপনি ব্যবহার করেন, তাহলে inline, inline-blockঅথবা table-cell, আপনি ভাল হওয়া উচিত। MDN:vertical-align

— rinogo

মোহন মত কাজ! আপনাকে ধন্যবাদ: ডি

— মোহাম্মদ এ ফাদিল

Answer 3

সমস্ত প্রস্তাবিত বিকল্প বিবেচনা করার পরে, সবচেয়ে পরিষ্কার সমাধানটি লাইন-উচ্চতা নির্ধারণ এবং উল্লম্ব-সারিবদ্ধ সবকিছু মনে হচ্ছে:

জেসফিডাল ডেমো দেখুন

সিএসএস:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

Comments

আপনার ধারকটি 50px এর চেয়ে বড় হলে কী হবে? তারপরে এটি কাজ করবে না ... আমার কাছে এমন কন্টেন্ট রয়েছে যা আকার পরিবর্তন করে এবং এর ভিতরে থাকা আইকন থাকা উচিত ... এটি সম্পর্কে কোনও ধারণা?

— স্লেভেন টম্যাক

Answer 4

যদি জিনিসগুলি সারিবদ্ধ না হয়, তবে line-height: inherit;নির্দিষ্ট আই.এফ.এ উপাদানগুলির সিএসএসের মাধ্যমে একটি সরল পদ্ধতি যা প্রান্তিককরণের সমস্যা রয়েছে কেবল কৌশলটি যথেষ্ট পরিমাণে করতে পারে।

আপনি সম্ভবত একটি বিশ্বব্যাপী সমাধানও ব্যবহার করতে পারেন যা সামান্য উচ্চতর সিএসএসের নির্দিষ্টতার কারণে ফন্টআউবাইজের .ফার নিয়মটি ওভাররাইড হবে যা সম্পত্তির line-height: 1প্রয়োজন ছাড়াই নির্দিষ্ট !importantকরে:

i.fa {
  line-height: inherit;
}

কেবলমাত্র নিশ্চিত হয়ে নিন যে উপরের গ্লোবাল সমাধানগুলি এমন জায়গাগুলিতে অন্য কোনও সমস্যার কারণ না ঘটায় যেখানে আপনি ফন্টআউভিজ আইকন ব্যবহার করতে পারেন।

Answer 5

একটি ফ্লেক্সবক্স বিকল্প - ফন্ট দুর্দান্ত 4..7 এবং নীচে

এফএ 4.x হোস্ট করা ইউআরএল - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

বেহালা

http://jsfiddle.net/Hastig/V7DLm/180/

---

ফ্লেক্স এবং ফন্ট দুর্দান্ত ব্যবহার 5

এফএ 5.x হোস্ট করা ইউআরএল - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

বেহালা

https://jsfiddle.net/3bpjvof2/

Comments

এটি কোনও পাঠ্যের একটি লাইনের মধ্যে নয়, একটি ডিভের মধ্যে উল্লম্বভাবে একটি আইকনকে কেন্দ্র করতে পারে। দুর্দান্ত কাজ!

— শিন শিম

@ যারাই এটি সম্পাদনা করার চেষ্টা চালিয়ে যায় - উত্তরের জন্য এটি সাধারণত আমার বিন্যাস শৈলী। আমি বিশ্বাস করি এটি এটিকে আরও পঠনযোগ্য / বোধগম্য করে তোলে এবং লিঙ্কটি ক্লিক করার আগে লোকেরা কোথায় চলেছে তা আরও ভালভাবে জানতে দেয়। এফ এ হোস্টেড ইউআরএল-এর ক্ষেত্রে কিছু লোকের অনুলিপি করার জন্য একটি লিঙ্কটি হাইলাইট করার অভ্যাস থাকে, এ কারণেই এটি সম্পূর্ণ লেখা হয়। পৃষ্ঠাটি আরও ভালভাবে ভেঙে ফেলার জন্য জেসফিডাল লিঙ্কগুলির একটি শিরোনাম রয়েছে, অন্যথায় এটি মিস করা সহজ এবং উত্তরগুলি বিশৃঙ্খল দেখতে পারে।

— হাসটিগ জুসামেনস্টেলেন

Answer 6

সবচেয়ে সহজ উপায় হ'ল উল্লম্ব-সারিবদ্ধ CSS সম্পত্তিটি মাঝখানে সেট করা

i.fa {
    vertical-align: middle;
}

Comments

.svg-inline--faজন্য FontAwesome 5

— darylknight

@ ড্যারিলকাইটে, এর অর্থ কী? আমি কীভাবে এটি সক্রিয় / ব্যবহার করব? fa-clockক্লাসে আমার পরে কিছু যুক্ত করবেন ?

— অধ্যাপক ফ্যালকান

Answer 7

এটি আমার পক্ষে ভাল কাজ করেছে।

i.fa {
  line-height: 100%;
}

Answer 8

আপনার আইকন হিসাবে সেট করার চেষ্টা করুন height: 100%

মোড়ক দিয়ে আপনাকে কিছু করার দরকার নেই (বলুন, আপনার বোতাম)।

এটির জন্য হরফ হরফ হ'ল 5 এটি নিশ্চিত নয় যে এটি পুরানো এফএ সংস্করণগুলির জন্য কাজ করে।

.wrap svg {
    height: 100%;
}

মনে রাখবেন আইকনটি আসলে একটি svgগ্রাফিক।

ডেমো

Answer 9

আইকনের লাইন উচ্চতা সূক্ষ্ম-সুর করার জন্য আরেকটি বিকল্প হ'ল vertical-alignসম্পত্তির শতাংশ ব্যবহার করে । সাধারণত, 0% নীচে এবং শীর্ষে 100% থাকে তবে আকর্ষণীয় প্রভাব তৈরি করতে কেউ নেতিবাচক মান বা শতাধিক ব্যবহার করতে পারে।

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

Answer 10

আমি পাঠ্যটি এমনভাবে মুড়ে দেব যাতে আপনি এটি আলাদাভাবে লক্ষ্য করতে পারেন। এখন যদি আপনি উভয় এবং বাম ভাসা করেন তবে আপনি লম্বালম্বী উচ্চতাটি এর উল্লম্ব ব্যবধানটি নিয়ন্ত্রণ করতে পারেন। এটির (30px) সমান উচ্চতায় সেট করা মধ্যমভাবে প্রান্তিক হবে। এখানে দেখুন ।

নতুন মার্কআপ:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

নতুন সিএসএস:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

Comments

উল্লম্ব-সারিবদ্ধ ব্লক উপাদানগুলিতে কিছুই করে না , এটি কেবল ইনলাইন বা টেবিল-সেল উপাদানগুলিতে কাজ করে।

— cimmanon

আমি দেখতে পাচ্ছি, লাইন-উচ্চতা = ধারকের উচ্চতা এবং ভাসমান জিনিসগুলি বাম কাজ করে এবং টাইপিংয়ের প্রয়োজন কম। গোলমাল সহ একটি আপডেট হওয়া ফিডল এখানে রয়েছে: jsfiddle.net/F3KyK/7

— পল

vertical-align: middleআইকন এবং পাঠ্যের উপরে সেট করা ভাল । এইভাবে আপনি আইকন উচ্চতা সম্পর্কে অনুমান করছেন না এবং সিএসএস কম আছে।

— মারোস

Answer 11

যারা বুটস্ট্র্যাপ 4 ব্যবহার করেন তাদের পক্ষে সহজ:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Comments

উল্লম্ব-সারিবদ্ধ হিসাবে এটির কোনও ব্যবহার নেই: এই শ্রেণীর দ্বারা প্রয়োগ করা মাঝারিটি কেবল টেবিলগুলিকে লক্ষ্য করে।

— লুকাস মানজকে

Answer 12

একটি ফ্লেক্সবক্স ব্যবহার করার সময়, পাঠ্যের পাশে হরফ আইকনের ফন্টের উল্লম্ব সারিবদ্ধতা খুব কঠিন হতে পারে। আমি মার্জিন এবং প্যাডিং চেষ্টা করেছি, কিন্তু এটি সমস্ত আইটেম সরিয়ে নিয়েছে। আমি কেন্দ্র, প্রারম্ভিক, বেসলাইন ইত্যাদির মতো বিভিন্ন ফ্লেক্স প্রান্তিককরণ চেষ্টা করেছিলাম, কোনও লাভ হয়নি। শুধুমাত্র আইকনটি সামঞ্জস্য করার সবচেয়ে সহজ এবং পরিষ্কার উপায় হ'ল এটিতে ডিভ যুক্ত রয়েছে সেটটি position: relative; top: XX;কাজটি পুরোপুরিভাবে করেছিল।

Answer 13

ঠিক আছে, এই প্রশ্নটি বহু বছর আগে জিজ্ঞাসা করা হয়েছিল। আমি মনে করি প্রযুক্তিটি বেশ কিছুটা পরিবর্তিত হয়েছে এবং ব্রাউজারের সামঞ্জস্যতা আরও ভাল। আপনি উল্লম্ব-সারিবদ্ধ ব্যবহার করতে পারেন তবে আমি বিবেচনা করব যে কিছু কম স্কেলযোগ্য এবং কম পুনরায় ব্যবহারযোগ্য। আমি একটি ফ্লেক্সবক্স সুপারিশ করব পদ্ধতির ।

এখানে মূল উদাহরণটি পোস্টার হিসাবে ব্যবহৃত তবে ফ্লেক্সবক্সের সাথে একই is এটি একটি একক উপাদান শৈলী। যদি কোনও কারণে বোতামের আকার পরিবর্তন হয় তবে এটি উলম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত হতে থাকবে।

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

উদাহরণ: জেএসফিডাল

Answer 14

vertical-alignআইকন উপাদানটির জন্য কেবল সম্পত্তি নির্ধারণ করুন :

div .icon {
   vertical-align: middle;
}