Solved

Center control in div

Posted on 2014-10-14
13
173 Views
Last Modified: 2014-10-15
Is there a way to center a web server control within a div using css3?  If so,  please provide an example.

Thanks
0
Comment
Question by:Ray Turner
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40379939
If it has a set width then just add to its css

margin:auto;
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40380176
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
 

Author Comment

by:Ray Turner
ID: 40380381
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
Technology Partners: 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!

 

Author Comment

by:Ray Turner
ID: 40380427
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
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40380755
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
 
LVL 58

Expert Comment

by:Gary
ID: 40380757
Are we talking about the image slider?
margin auto will works since it has a set width
0
 

Author Comment

by:Ray Turner
ID: 40381037
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
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40381558
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
 

Author Closing Comment

by:Ray Turner
ID: 40381887
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
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40381910
You are welcome - thanks for the points.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40382115
So the first comment was wrong then...
0
 

Author Comment

by:Ray Turner
ID: 40382201
Yes.  The selector was missing.
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question