Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 178
  • Last Modified:

Center control in div

Is there a way to center a web server control within a div using css3?  If so,  please provide an example.

Thanks
0
Ray Turner
Asked:
Ray Turner
  • 5
  • 4
  • 3
1 Solution
 
GaryCommented:
If it has a set width then just add to its css

margin:auto;
0
 
Julian HansenCommented:
A web server control is a bit high level for this discussion - a control will render out as html - how it renders to html will determine how you style it.

Centering is also 2 dimensional - vertical and horizontal. In HTML the latter is sometimes a lot easier to achieve than the former.

As Gary has mentioned is to give it a margin of auto - to center it - but this won't always work - you might have to look at giving the parent element a style of text-align: center. If you want to center vertically then that also needs discussion.

Can you give an example of the rendered html for the control in question.
0
 
Ray TurnerSenior ConsultantAuthor Commented:
I tried both suggestions.  Neither worked.  Here's my code.
<table>
  <tr id="Billboard">
    <td>
      <div style="margin-left: 125px; padding-top: 5px;">
        <dx:ASPxImageSlider ID="imgsBillboard" runat="server" ClientInstanceName="ImageSlider" EnableTheming="False" NavigateUrlFormatString="" Height="250px" Width="980px" SettingsSlideShow-PausePlayingWhenMouseOver="True" ViewStateMode="Enabled" ImageUrlField="ImageURL" NavigateUrlField="Billboard_NavigateURL" SettingsSlideShow-Interval="7000" Cursor="pointer">
          <SettingsImageArea ImageSizeMode="ActualSizeOrFit" ItemTextVisibility="None" AnimationDuration="700" AnimationType="Fade" NavigationButtonVisibility="None" />
          <SettingsBehavior ImageLoadMode="Auto" />
          <SettingsNavigationBar Mode="Dots" />
          <SettingsSlideShow AutoPlay="true" PlayPauseButtonVisibility="Faded"></SettingsSlideShow>
          <SettingsAutoGeneratedImages ImageHeight="440px"></SettingsAutoGeneratedImages>

          <ClientSideEvents ItemClick="function(s, e) {LaunchURL();}"></ClientSideEvents>
          <Styles>
            <NavigationBarDotsModeBottom>
              <Margins MarginTop="4px" />
              <Paddings PaddingTop="4px" />
            </NavigationBarDotsModeBottom>
            <ImageArea Width="980" Height="250">
            </ImageArea>
            <ItemTextArea Font-Names="Arial" Font-Size="11pt">
            </ItemTextArea>
          </Styles>
        </dx:ASPxImageSlider>
      </div>
    </td>
  </tr>
</table>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Ray TurnerSenior ConsultantAuthor Commented:
Sorry for the sloppy code.  Here's a cleaner version:
<div id="Billboard" style="margin-left: 125px; padding-top: 5px;">
  <dx:ASPxImageSlider ID="imgsBillboard" runat="server" ClientInstanceName="ImageSlider" EnableTheming="False" NavigateUrlFormatString="" Height="250px" Width="980px" SettingsSlideShow-PausePlayingWhenMouseOver="True" ViewStateMode="Enabled" ImageUrlField="ImageURL" NavigateUrlField="Billboard_NavigateURL" SettingsSlideShow-Interval="7000" Cursor="pointer">
    <SettingsImageArea ImageSizeMode="ActualSizeOrFit" ItemTextVisibility="None" AnimationDuration="700" AnimationType="Fade" NavigationButtonVisibility="None" />
    <SettingsBehavior ImageLoadMode="Auto" />
    <SettingsNavigationBar Mode="Dots" />
    <SettingsSlideShow AutoPlay="true" PlayPauseButtonVisibility="Faded"></SettingsSlideShow>
    <SettingsAutoGeneratedImages ImageHeight="440px"></SettingsAutoGeneratedImages>
    <ClientSideEvents ItemClick="function(s, e) {LaunchURL();}"></ClientSideEvents>
  <Styles>
    <NavigationBarDotsModeBottom>
      <Margins MarginTop="4px" />
      <Paddings PaddingTop="4px" />
    </NavigationBarDotsModeBottom>
    <ImageArea Width="980" Height="250"></ImageArea>
    <ItemTextArea Font-Names="Arial" Font-Size="11pt"></ItemTextArea>
  </Styles>
  </dx:ASPxImageSlider>
</div>

Open in new window

0
 
Julian HansenCommented:
Are you wanting to center  the image slider?

How is the control rendered on the client side? Do you have a link we can go to?

Have you tried something like this
HTML
<dx:ASPxImageSlider  .... CssClass="ASPxImageSlider" ....>

Open in new window

CSS
.ASPxImageSlider {
    margin: 0 auto;
}

Open in new window


However, without seeing how the control is rendered in the browser - just guessing.
0
 
GaryCommented:
Are we talking about the image slider?
margin auto will works since it has a set width
0
 
Ray TurnerSenior ConsultantAuthor Commented:
Here's the url to see what is going on.

http://www.newseasonministry.org/

I center the control with the following code:

<div id="Billboard" style="margin-left: 125px; padding-top: 5px;">

It's okay.  I wanted to do something that's more reusable.
0
 
Julian HansenCommented:
You need to add
margin; 0 auto;

Try adding this to your style sheet
#billboard .dxisControl {
   margin: 0 auto;
}

Open in new window


and remove the margin from the Billboard style
i.e remove
margin-left: 125px;
0
 
Ray TurnerSenior ConsultantAuthor Commented:
Perfect!  Thanks it works.  The only change I had to make was the following:

#Billboard .dxisControl {
   margin: 0 auto;
}

CSS/HTML is case sensitive.
0
 
Julian HansenCommented:
You are welcome - thanks for the points.
0
 
GaryCommented:
So the first comment was wrong then...
0
 
Ray TurnerSenior ConsultantAuthor Commented:
Yes.  The selector was missing.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now