Question

您好，我需要您在这个页脚中的这两个元素的垂直居中帮助，我希望它们在页脚内的同一垂直水平。这就是它现在的样子： footer example

这是我的代码：

＆＃13;

Sub Yellow()
With selection.Find
    .Text = "[0-9]{4}, [0-9]{1,}, [0-9]{1,}"
    .MatchWildcards = True
    .ClearFormatting
    .Forward = True
    .Wrap = wdFindContinue
    Do
        .Execute
        If .Found And selection.Range.Next(wdCharacter, 1) <> "" & ChrW(8211) & "" Then
        selection.Range.HighlightColorIndex = wdYellow
        End If
        If Not .Found Then
        Exit Do
        End If
        Loop
        End With


End Sub

＆＃13;

更新：我完成了VPx的建议，我的代码现在看起来像这样：

function ongrdfleetinvoice() {

var multiselect = $("#fleetinvoice").data('kendoMultiSelect');
multiselect.value(["3001","3004"]);

}
// I also try like this same function
function ongrdfleetinvoice() {

$("#fleetinvoice").getKendoMultiSelect().value(["3001","3004"]);

} 


//Here is my multiselect 
@(Html.Kendo().MultiSelect().Name("fleetinvoice")
                  .DataTextField("CariNam")
                  .DataValueField("CariKod")
                  .Placeholder("All")
                  .Filter(FilterType.Contains)
                  .HtmlAttributes(new { style = "width: 300px;" })
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("FillFleet", "HeadOffice");
                      });
                  })
                )

   //C# Code
   var resultCariler = (from m in objEntities.Cariler
                                 where (m.CariTip == 13)
                                 orderby m.CariNam ascending
                                 select m).AsQueryable();
            foreach (var item in resultCariler)
            {
                Cariler objCariler = new Cariler();
                objCariler.CariKod = item.CariKod.Trim();
                objCariler.CariNam = item.CariNam + - + item.CariKod.Trim();
                listCari.Add(objCariler);
            }

它仍然无法正常工作，现在看起来像这样：

second example of footer after suggested changes

Answer 1

只需使用 Flexbox ：

即可

＆＃13;

footer {
  display: flex;
  justify-content: space-between; /* max. horizontal space between them */
  align-items: center; /* vertical alignment / centering */
  height: 100%;
}

＆＃13;

<div style="position: fixed; width: 100%; height: 20%; left: 0; right: 0; bottom: 0; background-color: #0065A0; color: #FFFFFF;">
  <footer>   
    <div style="margin-left: 5%;">© 2014-2017 Calgarry</div>
    <div style="margin-right: 5%;">Report</div>
  </footer>
</div>

＆＃13;

为了更好地展示，我将外部div的height增加到20%。

Answer 2

将padding应用于页脚的内部元素。在页脚中删除height。

＆＃13;

      <div style="position: fixed; width: 100%; left: 0; right:0; bottom: 0;
       background-color:#0065A0; color: #FFFFFF;">
         <footer>   
         	<div style="float:left; margin-left: 5%; padding: 20px">© 2014-2017 Calgarry</div>  
         	<div style="float:right; margin: 0 auto; margin-right: 5%; padding: 20px">Report</div>  
         </footer>
      </div>

＆＃13;

Answer 3

＆＃13;

<div style="position: fixed;width:100%;left:0;right:0;background-color:#0065A0; color: #FFFFFF;top:0;">
  <footer style="height: 50px;display:table;width:100%">
    <div style="text-align:left;display:table-cell;vertical-align:middle;    padding: 2%;">© 2014-2017 Calgarry</div>
    <div style="text-align:right; display:table-cell;vertical-align:middle;    padding: 2%;">Report</div>
  </footer>
</div>

＆＃13;

Answer 4

<div class = "row">
<div class = "col-sm-6 col-sm-offset-3">
<div>© 2014-2017 Calgarry</div>
</div>
<div class = "col-sm-3">
<div>Report</div>  
</div>
</div>

试试这个！

Answer 5

最简单的方法是在页脚中添加填充顶部。

＆＃13;

<div style="position: fixed; width: 100%; height: 5%; left: 0; right:0; bottom: 0;
       background-color:#0065A0; color: #FFFFFF;">
  <footer style="padding-top: 0.5%;" >
    <div style="float:left; margin-left: 5%;">© 2014-2017 Calgarry</div>
    <div style="float:right; margin: 0 auto; margin-right: 5%;">Report</div>
  </footer>
</div>

＆＃13;

在页脚中居中两个div

5 个答案: