Member Avatar for RykeTech

Hey everyone!

I recently took over this website and am making some revisions, but for some reason the image won't center in the placeholder. The site is

The CSS behind it looks like:

.galleria-container {
    position: relative;
    overflow: hidden;
    background: #000;
    
}
.galleria-container img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    
}
.galleria-stage {
    position: absolute;
    top: 10px;
    bottom: 60px;
    left: 10px;
    right: 10px;
    overflow:hidden;
    
}
.galleria-thumbnails-container {
    height: 50px;
    bottom: 0;
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 2;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
    height: 40px;
    width: 60px;
    background: #000;
    margin: 0 5px 0 0;
    border: 1px solid #000;;
    float: left;
    cursor: pointer;
}

And the HTML looks like:

<style>
			html,body{background:#000}
            .content{color:#eee;font:14px/1.4 "helvetica neue", arial,sans-serif;width:580px;margin:20px auto; position:top center;}
            #galleria{height:400px; margin-bottom:25px; position: top center;}
        </style>
</head>
<body bgcolor="#000000" topmargin="0" marginheight="0">
<center>
  <table width="840" bgcolor="#000000" border="0" cellpadding="0" cellspacing="0"  Summary="visual display layout guide">
    <tr>
      <td align="center" valign="top"><span style="color: #000000;"><a name="top">Alexandria
          vacation resort accommodations on Lake Geneva</a></span></td>

    </tr>
  </table>
  <table width="840" border="0" cellpadding="0" cellspacing="0"  Summary="visual display layout guide">
    <tr>
      <td align="left" valign="top"><img src="images/1a_geneva_resort.jpg" width="165" height="74" alt="Family resort in Alexandria Minnesota"></td>
      <td align="left" valign="top" width="100%">
        <!--begin top navigation-->
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>

            <td align="left" valign="top"><a href="index.html" ONMOUSEOVER="img_act('menu4');statuson('Home');return true;" ONMOUSEOUT="img_inact('menu4');statusoff();return true;"><img src="menus/home_off.jpg" width="34" height="50" border="0" NAME="menu4" alt="Home"></a></td>
            <td align="left" valign="top"><a href="aboutus.html" ONMOUSEOVER="img_act('menu1');statuson('AboutUs');return true;" ONMOUSEOUT="img_inact('menu1');statusoff();return true;"><img src="menus/aboutus_off.jpg" width="57" height="50" border="0" NAME="menu1" alt="About Us"></a></td>
            <td align="left" valign="top"><a href="location.html" ONMOUSEOVER="img_act('menu2');statuson('LocationDirections');return true;" ONMOUSEOUT="img_inact('menu2');statusoff();return true;"><img src="menus/location_off.jpg" width="116" height="50" border="0" NAME="menu2" alt="Location/Directions"></a></td>
            <td align="left" valign="top"><a href="resort_layout.html" ONMOUSEOVER="img_act('menu3');statuson('ResortLayout');return true;" ONMOUSEOUT="img_inact('menu3');statusoff();return true;"><img src="menus/layout_off.jpg" width="89" height="50" border="0" NAME="menu3" alt="Resort Layout"></a></td>
            <td align="left" valign="top"><a href="faqs.html" ONMOUSEOVER="img_act('menu5');statuson('FAQs');return true;" ONMOUSEOUT="img_inact('menu5');statusoff();return true;"><img src="menus/faq_off.jpg" width="43" height="50" border="0" NAME="menu5" alt="FAQ's"></a></td>
            <td align="left" valign="top"><a href="contactus.html" ONMOUSEOVER="img_act('menu6');statuson('ContactUs');return true;" ONMOUSEOUT="img_inact('menu6');statusoff();return true;"><img src="menus/contactus_off.jpg" width="69" height="50" border="0" NAME="menu6" alt="Contact Geneva Beach Resort"></a></td>
            <td align="left" valign="top"><img src="images/phone.jpg" width="267" height="50" border="0" alt="Call 1-877-891-3200"></td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="top"><a href="rates_reservations.html" ONMOUSEOVER="img_act('menu7');statuson('RatesReservations');return true;" ONMOUSEOUT="img_inact('menu7');statusoff();return true;"><img src="menus/rates_reserv_off.jpg" width="138" height="24" border="0" NAME="menu7" alt="Rates/Reservations"></a></td>
            <td align="left" valign="top"><a href="accommodations.html" ONMOUSEOVER="img_act('menu8');statuson('Accommodations');return true;" ONMOUSEOUT="img_inact('menu8');statusoff();return true;"><img src="menus/accommodations_off.jpg" width="128" height="24" border="0" NAME="menu8" alt="Accommodations"></a></td>
            <td align="left" valign="top"><a href="amenities.html" ONMOUSEOVER="img_act('menu9');statuson('Amenities');return true;" ONMOUSEOUT="img_inact('menu9');statusoff();return true;"><img src="menus/amenities_off.jpg" width="79" height="24" border="0" NAME="menu9" alt="Amenties"></a></td>
            <td align="left" valign="top"><a href="activities.html" ONMOUSEOVER="img_act('menu10');statuson('ResortActivities');return true;" ONMOUSEOUT="img_inact('menu10');statusoff();return true;"><img src="menus/activities_off.jpg" width="131" height="24" border="0" NAME="menu10" alt="Resort Activities"></a></td>
            <td align="left" valign="top"><a href="history.html" ONMOUSEOVER="img_act('menu11');statuson('History');return true;" ONMOUSEOUT="img_inact('menu11');statusoff();return true;"><img src="menus/history_off.jpg" width="66" height="24" border="0" NAME="menu11" alt="History"></a></td>
            <td align="left" valign="top"><a href="attractions.html" ONMOUSEOVER="img_act('menu12');statuson('AreaAttractions');return true;" ONMOUSEOUT="img_inact('menu12');statusoff();return true;" target="_new"><img src="menus/attractions_off.jpg" width="133" height="24" border="0" NAME="menu12" alt="Area Attractions"></a></td>
            <!--end top navigation-->

        </tr>
      </table>
    </td>
  </tr>
</table>
<table width="840" border="0" cellpadding="0" cellspacing="0"  Summary="visual display layout guide">
  <tr>
    <td align="left" valign="top"><img src="images/2a_accommodations.jpg" width="165" height="268" alt="Minnesota summer resort"></td>
    <td align="left" valign="top"><img src="images/2b_accommodations.jpg" width="255" height="268" alt="Minnesota resort vacation"></td>
    <td align="left" valign="top"><img src="images/2c_accommodations.jpg" width="221" height="268" alt="Minnesota housekeeping resort"></td>

    <td align="left" valign="top"><img src="images/2d_accommodations.jpg" width="199" height="268" alt="Lake Geneva MN resort"></td>
  </tr>
</table>
<table width="840" border="0" cellpadding="0" cellspacing="0"  Summary="visual display layout guide">
  <tr>
    <td align="left" valign="top"><img src="images/3_blank.jpg" width="840" height="25" alt="Lake Geneva family vacation"></td>
  </tr>
</table>
<table width="840" background="images/bkd_tan.jpg" border="0" cellpadding="0" cellspacing="0" Summary="visual display layout guide">
<tr>
  <td align="left" valign="top" colspan="3"><img src="images/genevahouse/title_geneva_house.jpg" width="641" height="86" alt="Geneva House"></td>

  <td align="left" valign="top" rowspan="2">
    <!--begin right navigation-->
    <table width="184" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="left" valign="top"><img src="images/menu_top.jpg" width="184" height="15" alt=""></td>
      </tr>
      <tr>
        <td align="center" valign="top" background="images/menu_bkd.jpg"> 
          <a href="geneva_house.html" class="type4">Geneva House</a><br>
          <a href="homestead_lodge.html" class="type4">Homestead Lodge</a><br>
          <a href="linden_lodge.html" class="type4">Linden Lodge</a><br>
          <a href="maple_lodge.html" class="type4">Maple Lodge</a><br>
		  <a href="townhomes_1and2.html" class="type4">Beach Townhomes 1 & 2</a><br>
		  <a href="townhome3.html" class="type4">Beach Townhome 3</a><br>
		  <a href="lakeside_suites.html" class="type4">Lakeside Suites 7, 8, 9</a><br>
		  <a href="lakeside_studios.html" class="type4">Lakeside Studios 5, 10</a><br>
		  <a href="lakeside_studio11.html" class="type4">Lakeside Studio 6, 11</a><br>
		  <a href="lakeside_walkup.html" class="type4">Lakeside Studio 12 Walkup</a><br>
		  <hr size="1" width="40%" noshade>
		  <a href="http://www.webervations.com/magic-scripts/resbook.asp?memberid=Geneva" class="type4" target="_new">Make a Reservation</a><br>
		  <a href="JavaScript: newWindow = openWin( 'brochure.html', 'Print', 'width=540,height=420,
toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=1,resizable=1, alwaysRaised=1,'); newWindow.focus()" title="Download Brochure" class="type4">Download Brochure</a><br>

          <a href="contactus.html" class="type4">Contact Us</a>
         </td>
      </tr>
      <tr>
        <td align="left" valign="top"><img src="images/menu_bottom.jpg" width="184" height="15" alt=""></td>
      </tr>
    </table>
    <!--end right navigation-->

      </td>
    </tr>
    <tr>
      <td align="left" valign="top" width="15">&nbsp;</td>
      <td align="left" valign="top" width="604">
        <table border="0" cellpadding="0" cellspacing-"0">
          <tr>
            <td align="center" valign="top"><b>$1,999.00<br>

			2011 minimum weekly rate for 6 persons or less</b><br>
			The Historic Geneva House is a large two-bedroom cabin (plus 3 season sleeping porch). Sleeps 11, with a full and twin bed in the back bedroom, a full bed and bunk in the front bedroom, and a full bed and bunks on the 3 season porch. Full eat-in kitchen (remodeled in 2008) with DW,  extra dining table on porch, large living room, bathroom with tub. Spacious and charming. Great for large groups. Central A/C. Weber gas grill. <br>
			<a href="http://www.webervations.com/magic-scripts/resbook.asp?memberid=Geneva" class="type5" target="_new">Check Availability</a><br>		
			
			<!--begin galleria slideshow-->
			
			<div class="content">
			<div id="galleria">
			
            <img alt="The Historic Geneva House" src="images/genevahouse/genevahouse.jpg">
            <img alt="Fully furnished kitchen with breakfast nook" src="images/genevahouse/geneva_kitchen.jpg">
            <img alt="Table in porch for games & great view of lake to read paper & drink coffee in the morning" src="images/genevahouse/geneva_porcharea.jpg">
            <img alt="Very spacious living room" src="images/genevahouse/geneva_livingroom.jpg">
            <img alt="Lakeside bedroom has a full bed and bunk bed" src="images/genevahouse/geneva_lake_bedroom.jpg">
            <img alt="Second bedroom has a full bed and a twin bed" src="images/genevahouse/geneva_park_bedroom.jpg">
            <img alt="There is also a full bed and a bunk bed in the porch" src="images/genevahouse/geneva_porch_bedroom.jpg">
        	
        	</div>
        	</div>
        	
        	<!--end galleria slideshow-->

Any idea what is wrong here?? I appreciate any direction you can point me in...

  • 2 Contributors
  • 2 Replies
  • 221 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by RykeTech

Dani AI

Generated

Context: reported a Galleria slideshow image that would not center and later removed the test page; correctly pointed out the missing link. The guidance below lists concise, practical fixes and diagnostics that apply to gallery widgets embedded in legacy table/center markup or modern CSS layouts.

A reliable, minimal horizontal-centering rule (works for most slideshow imgs) is:

/* horizontal centering — responsive and non-destructive */
.galleria-stage img {
  display: block;
  margin: 0 auto;
  float: none;
  max-width: 100%;
  height: auto;
}

Explanation: making the image a block-level element allows margin: 0 auto to center it. float:none clears any inherited floats and max-width:100% prevents overflow inside the stage.

When both vertical and horizontal centering is required and the stage is a positioned box, absolute centering is an option:

/* full (vertical + horizontal) centering inside a positioned stage */
.galleria-stage { position: relative; }
.galleria-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
}

Caution: many slideshow scripts set inline styles (width, left/top, transforms) or scale/crop images with JavaScript. Inline rules and high-specificity script-applied styles can override stylesheet rules. Plugin options or its API are the preferable place to change alignment; stylesheet overrides (and !important) should be last-resort measures.

Quick diagnostics (apply locally since the test page was removed): inspect the image and its parent with the browser devtools to check computed position, float, left/top, width and any inline styles; test the short CSS snippet live in devtools to see which approach wins; confirm the gallery script is not forcing sizing/positioning; and prefer replacing legacy <center>/align attributes with CSS-based layout for predictable behavior.

Recommended Answers

All 2 Replies

Member Avatar for peachy0685

There's probably about 20 images in the code you've posted and the link to your site no longer works. I suggest you get the link wokring again and clearly indicate which image you are referring to.

Member Avatar for RykeTech

There's probably about 20 images in the code you've posted and the link to your site no longer works. I suggest you get the link wokring again and clearly indicate which image you are referring to.

I apologize, figured it out and removed the test page from the server.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.