كيفية مركز بلدي شعبة في جدول باستخدام CSS ؟

StackOverflow https://stackoverflow.com/questions/1042209

  •  22-07-2019
  •  | 
  •  

سؤال

أحاول إضافة الشرائح إلى واحدة من بلدي المواقع.على صفحة كاملة وضعت في جدول HTML (الذي أكره مع العاطفة ولا اختيار).أريد أن مركز بلدي الشرائح داخل paticular العمود.هنا هو ما CSS تبدو مثل:

#slideshow {
position:relative;
}

#slideshow IMG {
position:absolute;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

هنا هو بلدي وظيفة مسج لتغيير الصور:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

و أخيرا هنا هو عرض الشرائح div داخل الجدول:

<td bgcolor="red" align="center" valign="top"> 
<div id="slideshow">
    <img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" />
    <img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" />
    etc...
    etc...
</div>                    
</td>

لذلك لماذا لا يمكنني الحصول على بلدي الشرائح إلى مركز داخل تلك عمود ؟

هل كانت مفيدة؟

المحلول

العناصر المضمنة يمكن بسهولة تركزت باستخدام خاصية css "مواءمة النصوص:مركز؛".كتلة العناصر يجب أن تكون محاذاة في مركز باستخدام "margin-left:auto;margin-right:auto;" و من خلال منحهم عرض ثابت.في حالة معينة أود أن أقترح استخدام span بدلا من "شعبة" أو التخلص من شعبة تماما واستخدام text-align الأسلوب.

التحديث

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Centering</title>
    <style type="text/css">
      table{
       border:1px solid black; 
      }
      span{
        background-color:red; 
        color:white;       
      } 
      td{
        text-align:center;
        width:200px; 
      }
    </style>
  </head>
  <body>
    <div class="item" id="item1">
      <table>
        <tr>
          <td>
            <span>Hi there!</span>  
          </td>
        </tr>        
      </table>
    </div>    
    </body>
</html>

نصائح أخرى

#slideshow {
margin: 0 auto;
}

and also text-align: center

وللجدول

الحل التالي يعمل حتى عندما كنت لا تعرف حجم الصورة:

<div style="height:100px;width:100px;display:table-cell;مواءمة النصوص:مركز ؛ vertical-align:middle;" >
    <img src="images/myPicture.png">
</div>

وأود أن أضيف تعليق أعلاه ولكن لم يكن لديك 50 ممثل وزارة الصحة ... ويبدو لي أن نتذكر أنه إذا كان لديك أي شيء أمام DOCTYPE في IE6، فإنه يرسله إلى وضع المراوغات. أن المشاكل قد تسبب 

<?xml version='1.0' encoding='UTF-8'?>

قد يكون من المفيد تسديدة إزالة هذا.

إذا يمكنك إزالة المواقع المطلق، استخدم مواءمة النصوص: مركز على الدفتيريا

إذا لم تتمكن من إزالة المواقع المطلق وجميع الصور الخاصة بك هي نفس الحجم، وتعيين اليسار إلى TD / 2 - img_width / 2. حتى إذا كان لديك 80px صورة واسعة في الدفتيريا واسعة 200px، يمكنك استخدام 

#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}

إذا لم تتمكن من إزالة المواقع المطلق ولكم الصور وأحجام مختلفة، سيكون لديك لحساب قيمة اليسرى في جافا سكريبت الخاصة.

وIE لا يدعم التعتيم. ويستخدم filter: alpha(opacity = 50); بدلا من ذلك.

ومعيار 

 div#slideshow {
    margin : 0 auto;
    width : 200px;
}

وو(القديم؟) أي 

td {
    text-align : center;
}

وأي لا "مثل" هوامش السيارات ولكن العناصر المضمنة مراكز فحسب، بل عناصر كتلة (عناصر div)

وأيضا ليست شور ما هو القيمة القياسية الممتلكات عرض لالدفتيريا على أي لأنه لا يستخدم الجدول خلية ومواءمة النصوص لن تعمل داخل العناصر المضمنة حتى aproach محتمل آخر يتمثل في التفاف حولها آخر div: 

<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>

ووالمغلق 

div#slideshow {
    margin : 0 auto;
    width : 200px;
}
div#slideshow_container {
    text-align : center;
    width : 100%;
    height : 100%;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top