Question

我正在为我的项目使用Bulma。

基本上，我试图使用Bulma将文本和图像（height: 25em）内联。但它没有发生。

到目前为止，我试过这个：

＆＃13;

.img-cont {
  width: 50%;
  float: left;
}

img {
  height: 25em;
}

.clearfix {
  clear: left;
}

.content {
  float: right;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">

<div class="container is-info">
  <div class="img-cont">
  <img src="https://i.imgur.com/Pyp4DwX.png" alt="">
  </div>
  <div class="clearfix"></div>
  <div class="content has-text-centered">
    <span class="title">MEDAL</span><br>
    <span class="subtitle">Loren Ipsum Dolar Sit Amet.</span>
  </div>
</div>

＆＃13;

正如您所看到的那样，文字内容并未垂直居中并始终位于底部。

那么，我该如何解决这个问题并实现我想要的外观？

Answer 1

Bulma是基于Flexbox的布局，因此请使用它为您提供的工具。我已将您的代码段更新为包含Bulma的columns。如果您希望它们在较窄的视口中堆叠在一起，请删除c:\Users\user\\.nuget\packages\microsoft.sharepointonline.csom\\(version)\lib\netcore45类（请参阅更多here）。

using System;
using Microsoft.SharePoint.Client;

namespace ConsoleApp1 {
    class Program {
        static void Main(string[] args) {
            string targetSiteURL = @"https://xxx.sharepoint.com/sites/xxx";

            var login = "xxx@xx.onmicrosoft.com";
            var password = "xxx";

            SharePointOnlineCredentials onlineCredentials = new SharePointOnlineCredentials(login, password);

            ClientContext ctx = new ClientContext(targetSiteURL);

            ctx.Credentials = onlineCredentials;

            WebCreationInformation wci = new WebCreationInformation();
            wci.Url = "Site1"; // This url is relative to the url provided in the context
            wci.Title = "Site 1";
            wci.UseSamePermissionsAsParentSite = true;
            wci.WebTemplate = "STS#0";
            wci.Language = 1033;

            var newWeb = ctx.Web.Webs.Add(wci);
            ctx.Load(newWeb, w => w.Title);
            ctx.ExecuteQueryAsync();
            Console.WriteLine("Web title:" + newWeb.Title);
            Console.ReadKey();
        }
    }
}

is-mobile

布尔玛 - 如何使文本和图像内联或彼此相邻？

1 个答案: