Css R：居中并调整textInput的大小

我正在尝试做一些相对简单的事情。我有一个简单的闪亮页面，只有一个文本输入框和一个操作按钮

我希望它们都显示在窗口的中心（垂直和水平）

我开始使用的方法是使用一个带有两个FluidRow的fluidPage，每个元素一个：

library(shiny)
library(shinyapps)

shinyUI(fluidPage(theme = "bootstrap.css",
   fluidRow(
      column(8, align="center", offset = 2,
      textInput("string", label="",value = ""),
      tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center; font-size: 30px;}")
      )
   ),

   fluidRow(
      column(6, align="center", offset = 3,
         actionButton("button",label = textOutput("prediction")),
         tags$style(type='text/css', "#button { vertical-align: middle; height: 50px; width: 100%; font-size: 30px;}")
      )
   )
)
)

我可以让按钮显示在中间（水平），但不能显示文本输入框。如果我没有为textInput指定宽度，它将居中，但如果我增加宽度，它将向右延伸，因此不再位于中心。理想情况下，我希望它像按钮一样占据100%的列宽度（这就是我定义列大小8和偏移量2的原因），但当我指定宽度作为百分比时，它不会改变

除此之外，我希望textInput和按钮都出现在窗口的垂直中心，但除了在第一个窗口之前放入一个虚拟fluidRow以占用一些空间之外，我不知道如何实现这一点

---

感谢您的帮助，我想我可能花了比整个应用程序的其他部分更多的时间来尝试正确显示此页面。

在这种情况下，浏览器的开发工具（inspect元素）非常有限

如果检查代码生成的HTML，您会注意到

inputText

位于

div

中，其中

class=form-group-input-container

。这个

div

也是由

inputText（）

创建的，它有一个

width

参数将应用于这个容器div，而不是

input

标记

因此，您只需要：

...
textInput("string", label="",value = "", width = "100%"),
...

完整运行示例：

library(shiny)

runApp(
  list(
    ui = shinyUI(fluidPage(theme = "bootstrap.css",
                           fluidRow(
                             column(8, align="center", offset = 2,
                                    textInput("string", label="",value = "", width = "100%"),
                                    tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center; font-size: 30px; display: block;}")
                             )
                           ),
                           fluidRow(
                             column(6, align="center", offset = 3,
                                    actionButton("button",label = textOutput("prediction")),
                                    tags$style(type='text/css', "#button { vertical-align: middle; height: 50px; width: 100%; font-size: 30px;}")
                             )
                           )
    )
    ), server = shinyServer(function(input, output) {})))

---

感谢您的回复，我在其他地方发现了这一点，但我得到了一个错误：

textInput（“string”，label=“”，value=“”，width=“100%”）中的错误：未使用的参数（width=“100%”

您使用的是最新版本的R和Shining吗？上面的代码对我来说效果很好。我认为，没有理由让这段代码反映出我的意图。请检查控制台，上面写着。。。。未使用的参数（width=“100%”），带有最新的参数R，RStudio@Droid-伯德：代码在这里仍然有效。此参数用于

textInput（）

，可能您正试图在其他对象上使用它？我遇到了类似的问题：在我的机器上，代码使用width='100%'工作，但在另一台机器上，我收到了相同的错误。。。