সিএসএস একটি ইমেজ মুভিং

আমি এইচটিএমএল এবং সিএসএস ব্যবহার করে একটি ওয়েব পেজে একটি ইমেজ কেন্দ্রীভূত করার জন্য সংগ্রাম করছি।

<div class="header"> 
<div class="webpic"> 
RRR 
</div> 

RRR

.header {clear:both; position: relative; display: block; padding: 70px 20px 20px 20px; font-size: 40px; background-color: grey;} 
#webpic1 {text-align: center !important;} 
.Title {margin: 5px; padding: 10px; height: 90px; font-family: 'Comfortaa', arial, sans-serif; font-weight: 900; text-align: center;}

Many Thanks In Advance

0
আপনার এইচটিএমএলটি বিকৃত হয়েছে ( div ট্যাগটি বন্ধ করা অনুপস্থিত) এবং মনে হচ্ছে আপনার কোডের h3 শিরোনামের জন্য আপনার CSS এর সাথে কি রেখাযুক্ত নয়।
যোগ লেখক Tim Klein, উৎস
এখানে সম্পূর্ণ নির্দেশিকা CSS -tricks.com/centering-css-complete-guide</একটি>
যোগ লেখক Joykal Infotech, উৎস

7 উত্তর

<div id="thumbnailwrapper">
<div id="artiststhumbnail">
    
        <!--image here-->
        artist 
</div>
</div>

#thumbnailwrapper {
    color:#2A2A2A;margin-right:5px;
    border-radius:0.2em;
    margin-bottom:5px;
    background-color:#E9F7FE;
    padding:5px;
    border-color:#DADADA;
    border-style:solid;  
    border-width:thin;
    font-size:15px
    text-align: center;
}
#thumbnailwrapper:hover{box-shadow:0 0 5px 5px #DDDDDD}

#artiststhumbnail {
    width:420px;
    height:108px;
    overflow:hidden;
    border-color:#DADADA;     
    border-style:solid;
    border-width:thin;
    background-color:pink;
}
#artiststhumbnail:hover {left:50px }
#genre {
    font-size:12px;
    font-weight:bold;
    color:#2A2A2A
}


#artiststhumbnail a img {
    display : block;
    margin : auto;
}
2
যোগ
এই প্রশ্নটি ঠিক বলে মনে হচ্ছে না ... মনে হচ্ছে এটি একটি W3 স্কুল টিউটোরিয়াল থেকে অনুলিপি করা হয়েছে।
যোগ লেখক Tim Klein, উৎস
আমি একবার চেক আপডেট হবে
যোগ লেখক Webengers Info, উৎস
jsfiddle.net/marvo/3k3CC/2 একবার এটি পছন্দ করে দেখুন
যোগ লেখক Webengers Info, উৎস
.webpic {
    text-align: center;
}
or
.webpic>img{
    margin: 0 auto;
}
1
যোগ

ব্যবহার

.webpic {
  text-align: center
}

অথবা

#webpic1 {
  display: block;
  margin: auto;
} 
1
যোগ

যদি আপনি আপনার দ্বিতীয় শৈলী ব্লকটির জন্য .webpic এ লক্ষ্যটি স্যুইচ করুন এবং divimg উপাদানটি ঘিরে ফেলেন তবে আপনার চিত্রটি কেন্দ্রীভূত হওয়া উচিত ।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.webpic {text-align: center !important;}
<div class="webpic"> 
  RRR
</div>
</div> </div>
0
যোগ

যদি আপনি আপনার দ্বিতীয় শৈলী ব্লকটির জন্য .webpic এ লক্ষ্যটি স্যুইচ করুন এবং divimg উপাদানটি ঘিরে ফেলেন তবে আপনার চিত্রটি কেন্দ্রীভূত হওয়া উচিত ।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.webpic {text-align: center !important;}
<div class="webpic"> 
  RRR
</div>
</div> </div>
0
যোগ

শুধু CSS ফাইল এই কোড যোগ করুন এবং আপনার ইমেজ কেন্দ্রে হয়।

.webpic{text-align: center;}

আপনি যদি ছবিটি কেন্দ্র করতে চান তবে আপনাকে পাঠ্য-সংমিশ্রণ করা উচিত: উপরের শ্রেণী বা ট্যাগটিকে কেন্দ্র করুন। ধন্যবাদ।

0
যোগ

শুধু CSS ফাইল এই কোড যোগ করুন এবং আপনার ইমেজ কেন্দ্রে হয়।

.webpic{text-align: center;}

আপনি যদি ছবিটি কেন্দ্র করতে চান তবে আপনাকে পাঠ্য-সংমিশ্রণ করা উচিত: উপরের শ্রেণী বা ট্যাগটিকে কেন্দ্র করুন। ধন্যবাদ।

0
যোগ