如何在顶部放置闪亮的嵌入式单选按钮文本

Question

我想创建一个评级网站，就像这样： https://codepen.io/migli/pen/xGRwje

但是我想在中间。

google_services.json

这是我想要的，但是我对CSS不好。

Answer 1

看到这个，我在表单周围添加了一个div包装器，然后跟随CSS将其垂直和水平居中放置

.makeItCenter {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

<div class="makeItCenter">
 your code
 </div>

检查以下链接 https://codepen.io/anon/pen/vPXPmg

屏幕截图：

Answer 2

library(shiny)

css <- "
.radio-inline {
  padding: 0 10px;
  text-align: center;
  margin-left: 0 !important;
}
.radio-inline input {
  top: 20px;
  left: 50%;
  margin-left: -6px !important;
}"

ui <- basicPage(
  tags$head(
    tags$style(HTML(css))
  ),
  radioButtons("nav1", "", choiceValues = 1:10, 
               choiceNames = as.character(1:10), selected = 0, inline = TRUE)
)

server <- function(input, output) {}

shinyApp(ui, server)

Answer 3

用div包围整个表单，我们称其为“费率”：

<div id="rate">
    Your code here
</div>

，然后在您的CSS文件中添加以下内容：

#rate
{
    width: 100%;
    margin: 0 auto;
}