Question

我通常会使用margin: auto;，text-align: center;或left: 50%; transform: translateX(-50%);使图标居中对齐。但是我不知道如何居中对齐三个图标。我想在包装的div上使用这些策略是可以的，但是没有用。我需要它们都在同一行中，如下所示：

<div class="socialWrap">
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer 1

这是您要寻找的吗？

.socialWrap {
  display: flex;
  justify-content: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer 2

使用flexbox来实现。

.socialWrap {
  display: flex;
  justify-content: center;
}

.socialWrap a {
  margin-right: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">

  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer 3

您也可以使用Display:grid来检查代码段。

.socialWrap {
  display: grid;
  justify-content: center;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer 4

如果您正在使用Bootstrap-4，则只需添加一个类。试试这个：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="socialWrap text-center">
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer 5

您可以尝试一下。

library(datasets)
library(shiny)
library(dplyr)
library(ggplot2)
library(DT)
library(crosstalk)

data("iris")

# Define UI for application that draws a histogram
ui <- fluidPage(

  # Application title
  titlePanel("Analyze Iris table"),

  # Sidebar with a dropdown menu selection input for key measurecomponent
  sidebarLayout(
    sidebarPanel(
      selectInput("yInput", "Measuring element: ", 
                  colnames(iris), selected = colnames(iris)[2]), 
      selectInput('xInput', 'Grouper: ', 
                  colnames(iris), selected = colnames(iris)[5])
    ),

    # Show a plot of the generated distribution
    mainPanel(
      uiOutput('filter'),
      plotOutput("barPlot"),
      DTOutput('table1')
    )))

server <- function(input, output) {

  output$filter = renderUI({
    selectInput('inputF2',
                'Filter Item: ',
                c('Null', iris %>% select(input$xInput) %>% unique()))
  })

  iris_sub <- reactive({
    x_in <- as.name(input$xInput)
    if (req(input$inputF2) != 'Null') {
      iris_sub <- iris %>% filter(!!x_in == input$inputF2)
    } else{
      iris_sub <- iris
    }
    return(iris_sub)
  })

  by_xInput <- reactive({
    validate(
      need(expr = input$xInput != input$yInput,
           message = "Can't summarise by group when 'grouper' is the same as 'measuring element'"))

    iris_sub() %>%
      group_by_at(input$xInput) %>%
      add_tally() %>%
      summarize_at(.vars = vars(input$yInput),
                   .funs = list("mean_y" = mean))

  })

  output$barPlot <- renderPlot({

    # as the input is a string, use `aes_string`
    ggplot(data = by_xInput(), aes_string(x = input$xInput, y = "mean_y")) + 
      geom_bar(stat = 'identity')

  })

  output$table1 = renderDT(
    datatable(by_xInput())
  )
}

shinyApp(ui = ui, server = server)

将同一行中的三个或更多字体超赞图标居中对齐

5 个答案: