在DIV中平均分配文本

时间:2018-08-11 01:20:08

标签: html css alignment

似乎找不到其他任何东西可以解决这个问题。我的文本居中对齐,但我希望文本的所有侧面都均匀间隔,但文本仍适合DIV。

因此,您会得到'NO OUTLOOK APP WORK AROUND On Error GoTo WORKAROUND 'Create Outlook email Set xOutlookObj = CreateObject("Outlook.Application") Set xEmailObj = xOutlookObj.CreateItem(0) With xEmailObj .Display .To = "" .CC = "" .Subject = "QUOTE FOR -" + xSht.Name + xStr .Attachments.Add xFolder If DisplayEmail = False Then '.Send End If End With Else MsgBox "The active worksheet cannot be blank" Exit Sub End If 'SKIP TO END OF WORKAROUND IF NO ERROR WORKAROUND: Dim PID As Double Dim strRootPath As String Const strExpExe = "explorer.exe" Const strArg = " " '" /e,/root, " '// Change rootpath here strRootPath = "C:\Data Files" PID = Shell(strExpExe & strArg & strRootPath, 3) 'THIS IS WHERE IT NEEDS TO PICK UP AGAIN. ActiveSheet.Name = "ACTUAL" Unload Me CLOSE1.Show End Sub 之类的东西,而不是SELECT a.`firstname`, a.`lastname`, a.`email`, (SELECT c.`date_add` FROM `ps_guest` g LEFT JOIN `ps_connections` c ON c.`id_guest` = g.`id_guest` WHERE g.`id_customer` = a.`id_customer` ORDER BY c.`date_add` DESC LIMIT 1) AS `last_activity`, (SELECT cl.`name` FROM `ps_address` ad LEFT JOIN `ps_country_lang` cl ON cl.`id_country` = ad.`id_country` WHERE ad.`id_customer` = a.`id_customer` ORDER BY ad.`id_address` DESC LIMIT 1) AS `country_name` FROM `ps_customer` a ,在文本末尾也包括相等的间距。

|Page1Page2Page3Page4|
|  Page1  Page2  Page3  Page4  |

它将用作导航栏,其余40%的页面将用于包含徽标。我最终将这些堆栈用于移动设备或添加一个下拉菜单。

我会使用.navigation-container { width: 60%; display: flex; flex-flow: row nowrap; justify-content: center; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .nav { font-family: 'Roboto', serif; font-size: 2vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } .nav:hover { color: #096e67; },但是它已经耗尽,并且空间大小必须根据设备而定,因为文本不会离开或溢出DIV。因为它们已经居中,所以我不知道如何根据文本大小来填充侧面以适合设备。

超级困惑,在此先感谢

1 个答案:

答案 0 :(得分:0)

justify-content: space-evenly;

OR

justify-content: space-around;

OR

justify-content: space-between;

.navigation-container {
  width: 60%;
  display: flex;
  flex-flow: row nowrap;
  //justify-content: space-evenly; 
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.space-evenly {
  justify-content: space-evenly;
}
.space-around {
  justify-content: space-around;
}
.space-between {
  justify-content: space-between;
}

.nav {
  font-family: 'Roboto', serif;
  font-size: 2vw;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  color: #000000;
  padding-left: auto;
  padding-right: auto;
  line-height: 1em;
  object-fit: contain;
  text-decoration: none;
}

.nav:hover {
  color: #096e67;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div class="navigation-container space-evenly">
  <p class="nav">Page1</p>
  <p class="nav">Page2</p>
  <p class="nav">Page3</p>
  <p class="nav">Page4</p>
</div>
<div class="navigation-container space-around">
  <p class="nav">Page1</p>
  <p class="nav">Page2</p>
  <p class="nav">Page3</p>
  <p class="nav">Page4</p>
</div>
<div class="navigation-container space-between">
  <p class="nav">Page1</p>
  <p class="nav">Page2</p>
  <p class="nav">Page3</p>
  <p class="nav">Page4</p>
</div>