如何居中Dijit Select小部件？

Question

I'm using Dojo 1.10 and I need to display a Select widget centered horizontally on the page . 我使用的是Dojo 1.10，我需要在页面上水平居中显示Select小部件。 I cannot figure out how to do it. 我不知道该怎么做。 I have guessed a number of CSS attributes to try with no luck. 我猜想有很多CSS属性可以试试运气。 The Select widget is always displayed to the left. 选择窗口小部件始终显示在左侧。 Nothing seems to move it to the center. 似乎什么也没有将它移到中心。 How do I do it? 我该怎么做？

More broadly, where in the Dojo documentation does it describe how to do this? 更广泛地说，它在Dojo文档中的何处描述了如何执行此操作？ Believe me when I say I have done web search after web search; 当我说我在网络搜索后完成网络搜索时，请相信我； maybe I don't know what to search for. 也许我不知道要搜索什么。 Thanks in advance. 提前致谢。

This code is adapted from one of the dijit/form/Select samples. 此代码改编自dijit / form / Select样本之一。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/resources/dojo.css">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
    <script>
      require(["dojo/parser", "dijit/form/Select"]);
    </script>
  </head>

  <body class="claro">
    <select name="select1" data-dojo-type="dijit/form/Select">
      <option value="TN">Tennessee</option>
      <option value="VA" selected="selected">Virginia</option>
      <option value="WA">Washington</option>
      <option value="FL">Florida</option>
      <option value="CA">California</option>
    </select>
  </body>
</html>

Answer 1

It can be done, but as far as i know it can't be done by using CSS on the element classes or ID. 可以做到，但是据我所知，在元素类或ID上使用CSS不能做到。 Inline styles however will work. 内联样式将起作用。 This is due to how the Dijit is rendered. 这是由于Dijit的渲染方式所致。 For horizontal centering you need to specify element width (fixed or percentage). 对于水平居中，您需要指定元素宽度（固定或百分比）。 Note that this width can only be defined inline. 请注意，此宽度只能内联定义。 Otherwise it won't work and will screw up your rendering. 否则它将无法正常工作，并且会破坏渲染效果。

Giving the element a width and display it as block with horizontal margins on auto will do the trick. 给元素一个宽度并在auto上将其显示为带有水平边距的块即可解决问题。 Like this: 像这样：

<select data-dojo-type="dijit/form/Select" style="width: 200px; display: block; margin: 0 auto;">
    <!-- options -->
</select>

Since that's inline it isn't very maintainable. 由于这是内联的，因此不太容易维护。 So i would suggest/recommend using a wrapper element and putting the dijit's width to 100% like this: 所以我会建议/推荐使用wrapper元素，并将dijit的宽度设置为100％，如下所示：

<div id="wrapper">
    <select data-dojo-type="dijit/form/Select" style="width: 100%;">
        <!-- options -->
    </select>
</div>

So now you can use CSS to control your wrapper's width and margins: 因此，现在您可以使用CSS来控制包装器的宽度和边距：

#wrapper {
    width: 200px;
    margin: 0px auto;
}

Here's a working example on Plunker: http://plnkr.co/edit/NyD28E?p=preview 这是有关Plunker的工作示例： http ://plnkr.co/edit/NyD28E?p=preview

如何居中Dijit Select小部件？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-18 01:13:57

如何居中Dijit Select小部件？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-18 01:13:57

解决方案1
1 已采纳 2014-12-18 01:13:57