এইচটিএমএল স্প্যান সারিবদ্ধ কেন্দ্র কাজ করছে না?

107

আমার কিছু HTML আছে:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

ডিভটি আমার নথিতে স্পেসিং পরিবর্তন করছে, সুতরাং আমি পরিবর্তে এর জন্য একটি স্প্যান ব্যবহার করতে চাই।

তবে স্প্যান বিষয়বস্তুকে কেন্দ্রিক করে তুলছে না:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

আমি কিভাবে এটা ঠিক করব?

সম্পাদনা করুন:

আমার সম্পূর্ণ কোড:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— David19801
সূত্র

1

আপনার ডিভ "স্থান পরিবর্তন করছে"? আপনি এই দ্বারা কি বোঝাতে চেয়েছেন? এবং আপনার স্প্যানটি ডিফল্টরূপে এটি একটি ইনলাইন উপাদান হবেনা, যেখানে একটি ডিভ একটি ব্লক স্তর উপাদান।

— বোজাঙ্গলেস

হ্যালো জামওয়্যাফেলস, "ফাঁক দিয়ে" মানে ডিভটি সামগ্রীর উপরে এবং নীচে স্থান যুক্ত করে। স্প্যানটি এটি করে না।

— ডেভিড 19801

আপনার উপাদানটিতে সিএসএস বিধিগুলি প্রয়োগ করা হয় তা দেখতে ফায়ারব্যাগ বা ক্রোম পরিদর্শক ব্যবহার করুন এবং প্যাডিং বা মার্জিন যুক্ত করার জন্য সন্ধান করুন। পার্শ্ববর্তী উপাদানগুলির প্যাডিং / মার্জিন থাকাও সম্ভব।

— বোজ্যাঙ্গলেস

5

text-align=centerহওয়া উচিতtext-align:center

— n611x007

197

একটি ডিভ হ'ল একটি ব্লক উপাদান, এবং প্রস্থ নির্ধারণ না করা হয় তবে ধারকটির প্রস্থ বিস্তৃত হবে। একটি স্প্যানটি একটি ইনলাইন উপাদান, এবং এর ভিতরে পাঠ্যের প্রস্থ থাকবে। বর্তমানে, আপনি সিএসএস সম্পত্তি হিসাবে প্রান্তিককরণ সেট করার চেষ্টা করছেন। সারিবদ্ধ করা একটি বৈশিষ্ট্য।

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

যাইহোক, সারিবদ্ধ বৈশিষ্ট্যটি হ্রাস করা হয়। আপনার ধারকটিতে সিএসএস text-alignসম্পত্তি ব্যবহার করা উচিত ।

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— ইচ্ছাশক্তি
সূত্র

47

নিম্নলিখিত শৈলী ব্যবহার করুন। margin:autoসাধারণত বিষয়বস্তু সারিবদ্ধ করার জন্য ব্যবহৃত হয়। উপাদান display:tableজন্য প্রয়োজনspan

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— ক্রিস জে
সূত্র

37

alignঅ্যাট্রিবিউট অসমর্থিত হয়েছে। text-alignপরিবর্তে সিএসএস ব্যবহার করুন। এছাড়াও, বিঘত যদি না আপনি ব্যবহার টেক্সট কেন্দ্র না display:blockবা display:inline-blockএবং প্রস্থের জন্য একটি মান সেট, কিন্তু তারপর এটি একটি Div (ব্লক উপাদান) হিসাবে একই আচরণ করবে।

আপনি কি আপনার বিন্যাসের উদাহরণ পোস্ট করতে পারেন? Www.jsfiddle.net ব্যবহার করুন

— লুসিফার স্যাম
সূত্র

দুর্দান্ত কাজ করেছেন! ধন্যবাদ।

— dallinchase

আমি দুটি ইনলাইন উপাদানগুলিকে ইনলাইন উপাদান রাখার সময় আলাদাভাবে সারিবদ্ধ করতে পারি না?

— ড্যানিয়েল স্প্রিঞ্জার

11

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

আমার জন্য এটি খুব ভাল কাজ করেছে। এটিও চেষ্টা করে দেখুন

— AIMABLE
সূত্র

2

অন্যান্য সমস্ত ব্যাখ্যার উপরে, আমি বিশ্বাস করি আপনি "="কোলনের পরিবর্তে সমান চিহ্ন ব্যবহার করছেন ":":

<span style="border:1px solid red;text-align=center">

এটা করা উচিত:

<span style="border:1px solid red;text-align:center">

— nhazean
সূত্র

1

স্প্যানটি ইনলাইন-ব্লক এবং ইনলাইন টেক্সট আকারের সাথে সামঞ্জস্য করে, এমন একটি তাত্পর্য সহ যা বেশিরভাগ প্রচেষ্টাকে ইনলাইন প্রসঙ্গে স্টাইল করার জন্য বাধা দেয়। লেআউট স্টাইলকে সহজ করার জন্য (দ্বন্দ্ব সীমাবদ্ধ করুন), লাইন বিরতির সাথে ডিভকে 'পি' ট্যাগে যুক্ত করুন।

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— স্টুয়ার্ট চিহ্নিত করুন
সূত্র

-7

শুধু word-wrap:break-word;CSS ব্যবহার করুন। এটা কাজ করে।

— Mon
সূত্র