html - Aligning images and text in a row -


i'm building site has 'meet team' page. 'team' section has 2 rows 3 sets of images text underneath. want rows aligned 1 under other @ minute can't make happen. here's code snippet - 

.container {      margin: auto;      max-width: 100%;      padding-left: 10px !important;      padding-right: 10px !important;  }    #team div.row {    	height: 250px;    width: 100%;  	text-align: center;  	  }    section#team .four {    display: inline-block;    padding: 0;    margin: 0;    border: 0;      	  }
<section id="team">          <div class="container">              <div class="twelve columns">                               <h4>meet team</h4>                  <div class="row">                          <div class="four columns">                                  <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.                                  </p>                           </div>                                  <div class="four columns">                                  <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.                                  </p>                          </div>                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                      </div>                                    <div class="row">                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                          <div class="four columns">                                      <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">                                  <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>                          </div>                  </div>              </div>          </div>                      </section>

do need 4 columns each image? align along row display rule? appreciated.

flexbox trick.

.container {    margin: auto;    max-width: 100%;    padding-left: 10px !important;    padding-right: 10px !important;  }    section#team .row {    display: flex;    margin-bottom: 1em;  }    section#team .row .four {    text-align: center;  }
<section id="team">    <div class="container">      <div class="twelve columns">        <h4>meet team</h4>        <div class="row">          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.            </p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.            </p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>        </div>          <div class="row">          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>          <div class="four columns">            <img src="http://localhost:8888/wp-content/uploads/2017/07/hot-air-balloon.jpeg" alt="meet tim" style="width:100px;height:100px;">            <p>praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.praesent sodales, leo @ pellentesque pellentesque, nunc erat dapibus              nunc, ut congue libero lorem in orci. suspendisse potenti. quisque facilisis mauris in vestibulum tempor.</p>          </div>        </div>      </div>    </div>  </section>


Comments

Post a Comment

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

this question exact duplicate of: puphpet/vagrant: unable access lamp vm ip address 1 answer i following basic vagrant tutorial , vagrant provisions box on ubuntu without complaining. moreover, can vagrant ssh vm. however, vm not reachable host: it's not possible ping it's ip address. what have achieved: installed virtualbox (5.1.24 r117012 (qt5.5.1)) , vagrant (1.9.7) onto ubuntu (16.04.2 lts) machine. provisioned vm vagrant up , vagrant finishes job , not complain. vagrant ssh works. i have manually installed lighttpd on guest vm , can ping/curl address: localhost within guest vm. this when trying reach guest vm host: ~/tmp/myfirstvagrantproject$ ping 172.22.22.22 ping 172.22.22.22 (172.22.22.22) 56(84) bytes of data. ... icmp_seq=4 destination net unreachable ... 171 packets transmitted, 0 received, +21 errors, 100% packet loss, time 173
Read more

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

i'm receiving error applicationdbcontext database when trying update entity framework. i've googled, tried fixes here on so, no avail. i'm deleting database each time make change, once deploy, not option. here's error: pm> update-database -context applicationdbcontext system.data.sqlclient.sqlexception: there object named 'aspnetroles' in database. @ system.data.sqlclient.sqlconnection.onerror(sqlexception exception, boolean breakconnection, action 1 wrapcloseinaction) @ system.data.sqlclient.tdsparser.throwexceptionandwarning(tdsparserstateobject stateobj, boolean callerhasconnectionlock, boolean asyncclose) @ system.data.sqlclient.tdsparser.tryrun(runbehavior runbehavior, sqlcommand cmdhandler, sqldatareader datastream, bulkcopysimpleresultset bulkcopyhandler, tdsparserstateobject stateobj, boolean& dataready) @ system.data.sqlclient.sqlcommand.runexecutenonquerytds(string methodname, boolean async, int32 timeout, boolean
Read more

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -

i have built module in solidus , ruby on rails , try create tests. i trying create integration tests , have error: e error: prescriptionphotostest#test_/prescription_photos_post_endpoint_throws_an_error_when_wrong_params: argumenterror: missing host link to! please provide :host parameter, set default_url_options[:host], or set :only_path true test/integration/prescription_photos_test.rb:6:in `block in ' i read this , this , doesn't make difference. my code returning error on line: @user = factorygirl.create(:user) here code files. prescription_photos_rest.rb require 'test_helper' class prescriptionphotostest < actiondispatch::integrationtest setup spree::auth::config[:confirmable] = false @user = factorygirl.create(:user) end def authenticated_header token = knock::authtoken.new(payload: { sub: @user.id }).token { 'authorization': "bearer #{token}" } end test '/prescription_p
Read more